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.
Related
I have a certification and a badge provided by Acclaim. I want to embed it in my personal website but it's not working. here's the code they provided:
<div data-iframe-width="150" data-iframe-height="270" data-share-badge-id="60615e70-6409-4752-9d77-3553a43d13d2" data-share-badge-host="https://www.youracclaim.com"></div>
<script type="text/javascript" async src="//cdn.youracclaim.com/assets/utilities/embed.js"></script>
but even when simply put onto an empty html:5 page, I get the error: Loading failed for the <script> with source “file:///assets/utilities/embed.js”.
What's the problem here? I'm not sure how Acclaim can provide a ready-to-paste script that's just simply not working, nothing shows up on the website. I'm guessing the problem is at the src... part, but don't know how to fix it.
If you're loading your page via file:, then protocol-relative URLs aren't going to work. The script tag has:
src="//cdn.youracclaim.com/assets/utilities/embed.js"
This should be changed to:
src="https://cdn.youracclaim.com/assets/utilities/embed.js"
You'll find though that when you're using an actual web server, this is a non-issue. The reason for the protocol-relative URLs is so that HTTP pages would use the HTTP version, and HTTPS would use the HTTPS version. This method is outdated anyway. HTTPS should be used everywhere, even if you're loading HTTPS JavaScript from an HTTP page.
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
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 apologize if this question is simplistic, beginning web developer here.
I have a page that I am serving securely as https. The page uses the following two libraries:
<script src="http://myjs.us/param.js"></script>
<script src="http://myjs.us/entify.js"></script>
I am getting errors of the following type:
[blocked] The page at ... was loaded over HTTPS, but ran insecure
content from 'http://myjs.us/param.js': this content should also be
loaded over HTTPS.
So I get why I am getting this error, it is because I am loading the javascript libraries from an unsecure source. My question is where can I get these from a secure source?
Thanks in advance.
The basic solution is to remove the protocol form the URL when you call the javascript, change
<script src="http://myjs.us/param.js"></script>
to this
<script src="//myjs.us/param.js"></script>
With this you ensure that the javascript will load with the same protocol of the entire page.
Be sure that the server supports https (myjs.us for you), otherwise you will get an error like failed to load resource..., In this case, maybe you want to use a CDN with https support, like cdnjs
You can omit the protocol in your URLs:
<script src="//myjs.us/param.js"></script>
<script src="//myjs.us/entify.js"></script>
The browser will default to the current protocol being used by the page, in this case https. Of course, if myjs.us doesn't support https then that would be another issue entirely, and one you can't really solve from your page.
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).