I have some 3rd parties JavaScript files in my code which includes some another JavaScript files which are loaded after some event. I don`t have control to change code inside 3rd party JavaScript file.
My website is hosted on https and included files are loading over http since browser does not allow this to load and says "mix content blocked".
Can I write interceptor that will intercept this call and will change http to https.
When you are including a 3rd party library in your code, the loading browser will make the request to the server where the code is hosted. You can download the code, if it's available and there is no legal issues to do so, and host it on your server. You have to understand that not all data needs to go through https (to increase performance for example).
Take a look at this link to have a better understanding of the issue and how the prevent it.
Thanks for your comments but I don`t believe I should change 3rd party libraries as there might be some legal issues with it.
But I found something which can solve my issue by intercepting all the http calls and forward it to https by adding following code in your JavaScript at global.
Object.defineProperty(HTMLScriptElement.prototype, 'src', {
get: function() {
return this.getAttribute('src')
},
set: function(url) {
var prefix = "http://";
if (url.startsWith(prefix))
url = "https://" + url.substr(prefix.length);
console.log('being set: ' + url);
this.setAttribute('src', url);
}
});
Originally posted here : Force JavaScript to load additional resources over https
Related
We are using HTML5 to develope an phone app, which means that our local protocol on the phone is file://. We are trying to include Opentable's widget on our page for now. But their widget JS link looks like:
<script type='text/javascript> src='//secure.opentable.com/widget/reservation/loader?rid=27763&domain=com&type=standard&theme=standard&lang=en&overlay=false&iframe=true'></script>
Note that it starts with
//secure.opentable.com
So it will get our file:// protocol automatically. But even I change it to
https://secure.opentable.com
It still does not work on local. I noticed that in their JS source, they still used "//" which will somehow still get our "file://" protocol.
Here is the error after I change the link to https://secure.opentable.com/...
Failed to load resource: The requested URL was not found on this
server.
file://www.opentable.com/widget/reservation/canvas?rid=27763&domain=com&type=standard&theme=standard&lang=en&overlay=false&insideiframe=true
I noticed that in the console it looks like:
How can I make it work for a local environment?
Thanks!
Maybe this will work:
$(document).ready(function() {
$("iframe[src^='//www.opentable.com']").attr('src', function(i, oldsrc) {
return "https:" + oldsrc;
});
);
It waits until the document is ready, which should be after the new IFRAME is added to the DOM, then it replaces its src with one with the https: protocol.
I have some Google-Scripts on my website and unfortunately one of them loads some additional scripts and images over http instead of https (my website is delivered over https). I managed to get the scripts loaded over https with the following code (from this question):
Object.defineProperty(HTMLScriptElement.prototype, 'src', {
get: function(url) {
return this.getAttribute('src')
},
set: function(url) {
//console.log(url);
var prefix = "http://";
if (url.startsWith(prefix))
url = "https://" + url.substr(prefix.length);
//console.log('being set: ' + url);
this.setAttribute('src', url);
}
});
But there are a few image files, which are still loaded over http. These files are not available over https.
My thought was to download these images and put them on my server and load them from there. Is there a way with JavaScript to overwrite the image path? Of course, I could use jQuery but before this, I have to block the image-request before it's fired. Otherwise I have the Problem of mixed content on my page.
So let's put it together:
- page is loaded and after some time a certain user-action (in my case submitting a form) happens
- based on this action an additional script is loaded which places a virtual keyboard on my page
- this keyboard has some images which could not be loaded over https so I want to block these requests
- then, I want to replace the blocked image-urls with my custom image-urls
Is this possible?
Thanks!
You can try shimming a JavaScript based HTTP proxy that intercepts http requests preflight. There's a popular mocking JavaScript library that does that called pretender,
https://github.com/pretenderjs/pretender/blob/master/pretender.js#L266
I think you can use pretender's code to help you figure out how to intercept the http requests preflight and reroute them to a proxy of your choice that supports https.
I need to load a var by getting JSON from a webservice, so my question is where does this code go? I tried to put it in the content script but XHR would fail there.
Any suggestions?
Starting from Chrome 13 content scripts can also perform XHR requests (before only background pages could). So you can put your code wherever you like.
If it doesn't work then you probably didn't specify domain permissions (or trying to connect to non-80 port, to non-http(s) protocol etc).
I have multiple <head> references to external js and css resources. Mostly, these are for things like third party analytics, etc. From time to time (anecdotally), these resources fail to load, often resulting in browser timeouts. Is it possible to detect and log on the server when external JavaScript or CSS resources fail to load?
I was considering some type of lazy loading mechanism that when, upon failure, a special URL would be called to log this failure. Any suggestions out there?
What I think happens:
The user hits our page and the server side processes successfully and serves the page
On the client side, the HTML header tries to connect to our 3rd party integration partners, usually by a javascript include that starts with "http://www.someothercompany.com...".
The other company cannot handle our load or has shitty up-time, and so the connection fails.
The user sees a generic IE Page Not Found, not one from our server.
So even though my site was up and everything else is running fine, just because this one call out to the third party servers failed, one in the HTML page header, we get a whole failure to launch.
If your app/page is dependent on JS, you can load the content with JS, I know it's confusing. When loading these with JS, you can have callbacks that allow you to only have the functionality of the loaded content and not have to worry about what you didn't load.
var script = document.createElement("script");
script.type = "text/javascript";
script.src = 'http://domain.com/somefile.js';
script.onload = CallBackForAfterFileLoaded;
document.body.appendChild(script);
function CallBackForAfterFileLoaded (e) {
//Do your magic here...
}
I usually have this be a bit more complex by having arrays of JS and files that are dependent on each other, and if they don't load then I have an error state.
I forgot to mention, obviously I am just showing how to create a JS tag, you would have to create your own method for the other types of files you want to load.
Hope maybe that helps, cheers
You can look for the presence of an object in JavaScript, e.g. to see if jQuery is loaded or not...
if (typeof jQuery !== 'function') {
// Was not loaded.
}
jsFiddle.
You could also check for CSS styles missing, for example, if you know a certain CSS file sets the background colour to #000.
if ($('body').css('backgroundColor') !== 'rgb(0, 0, 0)') {
// Was not loaded.
}
jsFiddle.
When these fail, you can make an XHR to the server to log these failings.
What about ServiceWorker? We can use it to intercept all http requests and get response code to log whether the external resource fails to load.
Make a hash of the js name and session cookie and send both js name in plain and the hash. Server side, make the same hash, if both are same log, if not, assume it's abuse.
Hey everyone, I'm working on a widget for Apple's Dashboard and I've run into a problem while trying to get data from my server using jquery's ajax function. Here's my javascript code:
$.getJSON("http://example.com/getData.php?act=data",function(json) {
$("#devMessage").html(json.message)
if(json.version != version) {
$("#latestVersion").css("color","red")
}
$("#latestVersion").html(json.version)
})
And the server responds with this json:
{"message":"Hello World","version":"1.0"}
For some reason though, when I run this the fields on the widget don't change. From debugging, I've learned that the widget doesn't even make the request to the server, so it makes me think that Apple has some kind of external URL block in place. I know this can't be true though, because many widgets phone home to check for updates.
Does anyone have any ideas as to what could be wrong?
EDIT: Also, this code works perfectly fine in Safari.
As requested by Luca, here's the PHP and Javascript code that's running right now:
PHP:
echo $_GET["callback"].'({"message":"Hello World","version":"1.0"});';
Javascript:
function showBack(event)
{
var front = document.getElementById("front");
var back = document.getElementById("back");
if (window.widget) {
widget.prepareForTransition("ToBack");
}
front.style.display = "none";
back.style.display = "block";
stopTime();
if (window.widget) {
setTimeout('widget.performTransition();', 0);
}
$.getJSON('http://nakedsteve.com/data/the-button.php?callback=?',function(json) {
$("#devMessage").html(json.message)
if(json.version != version) {
$("#latestVersion").css("color","red")
}
$("#latestVersion").html(json.version)
})
}
In Dashcode click Widget Attributes then Allow Network Access make sure that option is checked. I've built something that simply refused to work, and this was the solution.
Cross-domain Ajax requests ( Using the XMLHttpRequest / ActiveX object ) are not allowed in the current standard, as per the W3C spec:
This specification does not include
the following features which are being
considered for a future version of
this specification:
Cross-site XMLHttpRequest;
However there's 1 technique of doing ajax requests cross-domain, JSONP, by including a script tag on the page, and with a little server configuration.
jQuery supports this, but instead of responding on your server with this
{"message":"Hello World","version":"1.0"}
you'll want to respond with this:
myCallback({"message":"Hello World","version":"1.0"});
myCallback must be the value in the "callback" parameter you passed in the $.getJSON() function. So if I was using PHP, this would work:
echo $_GET["callback"].'({"message":"Hello World","version":"1.0"});';
Apple has some kind of external URL block in place.
In your Info.plist you need to have the key AllowNetworkAccess set to true.
<key>allowNetworkAccess</key>
<true/>
Your code works in Safari because it is not constrained in the dashboard sever and it is not standards complient in that it DOES allow cross site AJAX. FF IS standards complient in that it DOES NOT allow cross site ajax.
If you are creating a dashboard widget, why don't you use the XMLHttpRequest Setup function in the code library of DashCode. Apple built these in so you don't need to install 3rd party JS libraries. I'm not sure about JSON support but perhaps starting here will lead you in a better direction.
So another solution is to create your own server side web service where you can control the CORS of, the users web browser can't access another site, but if you wrap that other site in your own web service (on the same domain) then it does not cause an issue.
Interesting that it works in Safari. As far as I know to do x-domain ajax requests you need to use the jsonp dataType.
http://docs.jquery.com/Ajax/jQuery.getJSON
http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/
Basically you need to add callback=? to your query string and jquery will automatically replace it with the correct method eg:
$.getJSON("http://example.com/getData.php?act=data&callback=?",function(){ ... });
EDIT: put the callback=? bit at the end of the query string just to be safe.