I have an iFrame which I only wanted to be embeddable on a specific website. For this I found the the following code
Header set Content-Security-Policy: "frame-ancestors https://..."
I put this code into my .htaccess file and it worked perfectly when testing it on my laptop. But when I access the specific URL where the iFrame should be allowed to be embedded with my smartphone (Android + iOS), it's blocked. I searched some time on Google but couldn't find a hint or way to change this.
Hope you can help me out on this.
Edit:
I searched through the net and tested a lot of stuff but nothing works. My .htaccess looks like this:
Header set Content-Security-Policy: "frame-ancestors domain1 domain2/embed.php?id=1;"
domain2/embed.php?id=1 includes the videosource which I want to embed on another website. When calling this domain the video is ready to go in my browser. When I check the console on MAC (this seems to be a Safari problem) I get the following error message:
The source list for Content Security Policy directive 'frame-ancestors' contains a source with invalid path: '/embed.php?id=1'. The query component, including the "?" will be ignored.
Refused to load domain2/embed.php?id=1 because it does not appear in the frame-ancestors directive of the Content Security Policy.
When inserting https://domain2 or domain2 in the frame-ancestors line nothing changes, the video is still not available in Safari. I read that I have to insert the link in the error message to the frame-ancestors but then the ? will be ignored and the video can't be displayed.
There must be someone who has a suggestion to this problem or?
Related
I have an issue on a Wordpress website in which the Google Maps doesn't load on Firefox and Safari specifically. The map shows blank and a message Loading map...that never ends on those 2 browsers.
This curious message in yellow is displayed on the browser on Google Chrome:
jquery.min.js?ver=1.11.1:4 Cross-Origin Read Blocking (CORB) blocked cross-origin response https://github.com/googlemaps/js-map-label/blob/gh-pages/src/maplabel.js?_=XXXXXXXXXX with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.
and in Firefox it displays the following message also as a yellow alert:
Loading failed for the <script> with source “https://github.com/googlemaps/js-map-label/blob/gh-pages/src/maplabel.js?_=XXXXXXXXX”.
Any clue on what it only works in Chrome and not in Firefox and Safari? Any clue how to solve it?
Thank you
As from the error, your CSP (Content Security Policy) does not allow you to load scripts from github.com domain.
You can :
Edit your content-security-policy headers to allow https://github.com loading. You can do it from your Apache/Nginx settings, or from PHP (if you use it) but I prefer handling those headers from web-server config.
CSP can also be managed using header meta tag
As you're directly serving from Github, you may need to change the default-src as content-type is text/html. I don't know if the script-src will handle it.
Download and upload the script to your server. Like this, it'll be loaded from the same domain, and should not throw CSP error.
Also:
Using files directly from GitHub is not the best idea. As you can see here and from your console error with MIME type text/html, Github serve your JS file as text/html instead of application/javascript.
It would be better to use a proper CDN (if a CDN serving your file exist), or store the file on your server.
When I put into html file this code, it does not show website.
<iframe src="https://www.ge-tracker.com/names/claws">
Can somebody help?
It is because your target site to put into the iframe does not allow itself to be loaded into an iframe that is hosted on a a different domain. It uses the X-Frame-Options http header to advise this to any browser that requests it.
You can examine this by looking at the error console in your chosen browser.
For instance, using Chrome, you will see:
Refused to display 'https://www.ge-tracker.com/names/claws' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN, SAMEORIGIN'.
I've loaded Disquss on my Wordpress website, which is running on HTTPS. The problem is that while the comments are shown at the bottom of the webpage, they are white (and since the background of the page is also white, they are not visible).
If I open Inspector in Chrome, the following error is printed to the Console tab.
Refused to execute inline script because it violates the following
Content Security Policy directive: "script-src https://*.twitter.com:*
https://api.adsnative.com/v1/ad.json *.adsafeprotected.com *.google-analytics.com https://glitter-services.disqus.com
https://*.services.disqus.com:* disqus.com http://*.twitter.com:*
a.disquscdn.com api.taboola.com referrer.disqus.com *.scorecardresearch.com
*.moatads.com https://admin.appnext.com/offerWallApi.aspx 'unsafe-eval'
https://mobile.adnxs.com/mob *.services.disqus.com:*". Either the 'unsafe-
inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required
to enable inline execution.
This happens because of the Popup Blocker Extension in Chrome, but I would like to enable it with content security policy: http://www.html5rocks.com/en/tutorials/security/content-security-policy/ . Basically, the error occurs in the chrome-extension://* scheme, so I need to add an appropriate entry to the Content-Security-Policy to allow chrome extensions.
How should I disable the security policy for chrome extensions?
This isn't something you can (or should) meaningfully solve. It's up to the extension vendor to properly implement themselves. The fact is the extension is attempting to inject inline code and it's being stopped by the Content Security Policy because the CSP is made to block it. As it should, since the extension is indistinguishable from malware from it's perspective.
You could (but should not) simply add rules to your site's Content Security Policy to allow the extension to run...but this is potentially dangerous, incredibly case-specific, and should basically only ever be done in an enterprise context in which everyone has a (poorly coded) browser extension that is required to work with your site. And even then re-coding the extension would generally be preferred.
How should I disable the security policy for chrome extensions?
Not. Additionally you can not.
I need to add an appropriate entry to the Content-Security-Policy to allow chrome extensions.
The CSP of extensions is part of the (local) extension.
while the comments are shown at the bottom of the webpage, they are white
Sounds like a matter of CSS to me ... what about color: black; for your text?
Or short: Websites are not able to mess with extensions. Which is good - I don't want facebook to disable my CSP and send my personal porn preferences (from PornLiner addon) to my profile.
I thought I have somehow found a solution to the very vexing problem with Firefox and CDN-hosted fonts access, but here comes IE9.
I recently found a very frustrating issue with IE9 caching problem, and chanced upon this blog post (IE9 Redirect Caching Nightmare) which enlightened me more about the actual issue.
I have to admit that I'm not sure whether the above mentioned is actually the issue, but it seems close enough.
Problem:
I have a website set up with 2 domains(base domain and subdomain) pointing to the same server, serving the exact same website which is using a same set of resources from a CDN hosted on Amazon S3, served by Cloudfront.
https://example.com
https://www.example.com
I get these kind of error messages in my IE9 developer tools console when loading fonts from my CSS file using #font-face:
CSS3117: #font-face failed cross-origin request. Resource access is restricted.
This happens when I loaded either of the URL first, then visiting the other second. IE9 is not running in Compatibility Mode. It running is in Document Mode: IE9 Standards.
From my limited understanding of the CORS and the need to set Access-Control-Allow-Origin HTTP header, I have dutifully set it up in S3 CORS policy, and it works perfectly fine with Firefox.
Requests from both domains, will get their respective header when requesting the CDN resource.
It seems that IE9 tried to do some optimization with caching, and cached the redirect too.
This causes a problem as the Access-Control-Allow-Origin header is cached as well. Without sending a request to the CDN server, the Access-Control-Allow-Origin header cannot change for different domains.
So I'm left with a situation where the request is from https://www.example.com and yet the Access-Control-Allow-Origin is https://example.com. This leads to the restricted resource problem with the error message above.
Further look: I did a check with Firefox 19, the above situation actually occurs, but it does not encounter the same strict restriction as IE9. Subdomain (https://www.example.com) requesting information will accept the access-control-allow-origin of the main domain(https://example.com). Chrome (Webkit) doesn't seem to care. I'm at a loss about which browser's behaviour implementation is correct.
With my current settings in the CDN, it seems like Chrome and Firefox, automatically reroutes allwww subdomain requests to the main domain. Only upon multiple attempts of inputing the www subdomain in the address bar, then will Chrome and Firefox obey. IE9 on the other hand, just goes to whichever address is typed in the address bar. IE9 seems to be the odd one out here, but I'm not sure which browser's behaviour is actually correct.
From a usability standpoint, Chrome and Firefox seems to be the "correct" behaviour.
Known Possible Solutions:
Set Access-Control-Allow-Origin header to allow all, i.e. *
Turn off caching in the browser
Redirect one domain to the other
Use query string to differentiate different domain calls for resource
Embed the font into the CSS as data-uri
For solution 1, let's just say I'm paranoid that I just want to set specific domains to allow.
For solution 2, is not optimal if I were to set it for all browsers, also my site has to run on mobile devices with usually less-than-desirable download speeds.
For solution 3, possible, but I'm still curious for solution to deal directly with the IE9 caching issue.
For solution 4, it is very hard to implement especially when the resource is called from #font-face. Does it mean that I'll have to dynamically re-generate the CSS for different domain calls for the different line just to load a font to bypass the issue? Seems to defeat the purpose of CSS itself, and caching resources for that matter.
edit: Stylesheet works, font-loading doesn't.
For Solution 5, it is tedious for maintenance and updating, especially when there are changes to the font files periodically.
Question: Are there any known ways to deal specifically with IE9's redirect caching behaviour in this particular case?
Answers and comments are very much appreciated. Thanks in advance!
Edit: More browser test information.
Solution 1:
Check this question.
Solution 4: rename your CSS file to style.php and use whatever code you need to call the appropriate resource.
Set the content type at the top of the page.
<?php
header("Content-type: text/css; charset: UTF-8");
?>
More info about style.php from Chris Coyier.
We discovered the same weird behavior also in IE10 and IE11.
Resetting the browser cache makes the fonts to be loaded without any problem. Also enabling and disabling compatibility mode.
But when switching to another subdomain, IE does not render the font because request header does not match the response header which is still the URL of the last request. And IE always shows the full URL for even if the definition on the bucket is *.ourdomain.com
So the general issue with allowing cross origin requests to assets like webfonts was solved by adding CORS permissions to the S3 Bucket - that made the webfonts work perfectly in Firefox.
But we still have no idea how to avoid * and tell IE not to cache the response headers.
I have a browser compatibilty problem with https? I have SSL installed and is in usage. Until today morning, my https part is working well. From then, Https is shown as https(with slashed in red color) saying the page has some insecure content.
I have not changed any code and suddenly i see this problem in chrome. In IE 8, i see the same problem but on every page, it shows me a popup if i should allow to opne secure and non secure or just secure. Firefox has no issues . It shows correct https without any problem. I am fed up with it searching all over. Why is this happenening for me in Chrome and IE 8.
Could someone tell me what the problem is and what can be done to solve it!
PS: I have also checked if the page source is any different when IE8 showed with and without secure data. Everything is the same. but viewstateID was different. Is that something that is creating this problem?
Thanks a lot in advance.
This is usually caused by having the absolute path to a resource specified somewhere on the page without having https specified, eg:
<img src="http://someurl.com/image.png">
If it's a link to something on your site, use https: or a relative path.
DO you have any 3:rd party javascript included, like google analytics or other that might have changed.
If you try with Firefox there is firebug you can add as an addon.
In there is a tab for network (net).
It lists everything the page loads.
In that list you should be able to find anything that gets loaded without https.
IE (correctly) complains when there is mixed http/https content as a security warning. Most other browsers do not typically complain when dealing with mixed content so your source is very likely the same in both instances.
I would second David Mårtensson's answer and say the issue is likely a third party library (google or MS hosted JQuery for example) or static asset server.