I'm trying to load in an external font (using the font provider's hosted CSS) from inside a sandboxed iframe. The font provider seems to be authorizing whether the font can load or not based on the contents of the Referrer header. However, when the request is made from inside the iframe, that header is not present (according to Chrome's devtools). Setting referrerpolicy="origin" on the <iframe> element doesn't seem to change anything. Tested in Chrome and Firefox.
Do I need to add a special attribute to my <link> tag, too? Is there something else I'm missing?
Related
The iframe with allow="geolocation" works great.
But what if I want to load a link which calls getCurrentPosition() from a html anchor tag?
Example :
In iframe, I'll use
<iframe src="https://siteWhichCallsGetGeolocation.com" allow='geolocation'></iframe>
I have a use case where a html embed link like
Click here to get geolocation
is embedded in a parent site.
The parent site loads the child link inside it's own iframe
It is to be noted that The parent site's iframe has the allow="geolocation" attribute .
In this case the request is silently denied with error
errorCode :1
errorMessage: "Geolocation has been disabled in this document by
permissions policy."
The feature policy document point to iframe but what about anchor tag embeds?
I understand that I can use a iframe instead of anchor tag embed but the parent site only allows anchor tag's.
PS - This is my first question here. Please assist.
Note :
I also tried a random shot by including allow="geolocation" for anchor tag, but it doesn't work.
This seems to work on Safari (which I'm assuming is because Safari hasn't yet implemented feature policy for cross origin site requests)
Edit 1 :
I tried my use case in jsfiddle and notice that all scripts i give (iframe or anchor tag) are loaded inside jsfiddle's iframe
<iframe name="result" allow="midi; geolocation; microphone; camera; display-capture; encrypted-media;" sandbox="allow-modals allow-forms allow-scripts allow-same-origin allow-popups allow-top-navigation-by-user-activation allow-downloads" allowfullscreen="" allowpaymentrequest="" frameborder="0" src=""> </iframe>
If i load my iframe inside this, it works perfectly !(perfectly balanced, as all things should be...)
But if I load my anchor tag inside this, i get the error. As per granty's answer
the jsfiddle's iframe with allow='geolocation' should set jsfiddle site's feature policy that all scripts loaded inside that iframe can access geolocation right ? Why does my iframe inside jsfiddle's iframe work but anchor tag doesnt ?
Note - I have no control over the top level site. I only code the scripts for https://siteWhichCallsGetGeolocation.com
SOLUTION (if you have control over top document's feature policy or control over any intermediate <iframe> which have geolocation permission) (derived from granty's answer)
I tried the suggested solution by changing the jsfiddle's iframe attribute via inspect element to
<iframe name="result" allow="midi; geolocation https://siteWhichCallsGetGeolocation.com ; microphone; camera; display-capture; encrypted-media;" sandbox="allow-modals allow-forms allow-scripts allow-same-origin allow-popups allow-top-navigation-by-user-activation allow-downloads" allowfullscreen="" allowpaymentrequest="" frameborder="0"></iframe>
To highlight, I added my site next to geolocation in allowlist like
allow="midi; geolocation https://siteWhichCallsGetGeolocation.com ;
and then loaded my anchor tag.
When the getCurrentPosition() was triggered from script loaded from https://siteWhichCallsGetGeolocation.com, I got the browser prompt to Allow/Deny location sharing. I allowed and got the coordinates!
Wow! If only it could be as simple as editing the top level document's feature/permissions policy via inspect element.
But alas,I have no control over the top level document's feature policy. At least I understood what's going on under the hood.
Briefly, you have to publish
Feature-Policy: geolocation https://siteWhichCallsGetGeolocation.com;
HTTP response header, when the server sends page into browser.
TL; DR or What's going on under the hood
The allow="geolocation" attribute is used to set Feature Policy (now it's renamed to Permissions Policy) inside iframe.
You use the geolocation directive with an emplty list of origins, therefore a default policy geolocation 'src' is applied. This means that inside iframe is allowed Geolocation API for scripts loaded from the same location as iframe - https://siteWhichCallsGetGeolocation.com.
Pls note that for allow="geolocation" default policy is 'src'(the origin from iframe's src=). But if you use directive Feature-Policy: geolocation;, the default policy for empty list is 'self'.
To set Feature Policy in the main page (top level document) is intended the Feature-Policy header. If it didn't set, the default policy geolocation 'self' is applied. This forbids using Geolocation API for scripts loaded from https://siteWhichCallsGetGeolocation.com origin.
Therefore use
Feature-Policy: geolocation https://siteWhichCallsGetGeolocation.com;
or
Feature-Policy: geolocation 'self' https://siteWhichCallsGetGeolocation.com;
if your own page uses geolocation too.
Ref EDIT 1
Jsfiddle's <iframe allow="geolocation;" means <iframe allow="geolocation 'src';". It means only scripts loaded from the same origin(Url) as jsfiddle iframe can access Geolocation API. Therefore it does not allow your anchor tag from the https://siteWhichCallsGetGeolocation.com origin.
BUT passing permissions of parent page into nested iframe perform a tricky way. If some browsing context has some permission, it can grant it to any nested contexts independantly of its origin (if it creates this context by self).
So jsfiddle's iframe has permission for geolocation. Inside jsfiddle's iframe is placed your nested iframe having allow='geolocation 'src'.
Jsfiddle's iframe delegate its permission for geolocation to your iframe, of course the allowed origin is changed when permission passing into another iframe.
Yes, scripts loaded from third-party Urls can create iframe too, but they can't grant geolocation permission, because they do not have it - since loaded from origins for which geolocation is not allowed.
the jsfiddle's iframe with allow='geolocation' should set jsfiddle site's feature policy that all scripts loaded inside that iframe can access geolocation right?
Not "loaded inside that iframe", but loaded from the same Url, as that iframe.
Otherwise, what's the point of specifying a list of allowed origins like allow="camera 'self' https://www.youtube.com", if any not listed script can have access to your camera.
It's a bad practice to use hidden default, therefore you was mislead. Instead of:
<iframe allow="midi; geolocation; microphone; camera; display-capture; encrypted-media;"
should be:
<iframe allow="midi 'src'; geolocation 'src'; microphone 'src'; camera 'src';
display-capture 'src'; encrypted-media 'src';"
I have an iframe - the iframe works when the src points to a page on the same server, allowing me to embed pages.
The same iframe will not allow me to embed pages from another server. I have tried different src= pages and different browsers on Windows, OSX and Linux. I have tried hard-coding the src attribute and setting it programatically.
I haven't worked w html for years and know click-jacking has caused some hosts to disallow their content but am confident this is not the issue.
<iframe src='myPage.html' name='i' id='i'></iframe>
works as expected
<iframe src='http://theirServer/theirPage.html' name='i' id='i'>
</frame>
does not work as expected
Not all sites allow you to embed them via iframe (such as google). if using Chrome, check your console. If you have an error like "Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'." then the site does not allow you to embed it.
Basically if the site uses the header X-Frame-Options, and has it set to SAMEORIGIN, there's nothing you can do.
I want to apply css to google calender iframe. I had tried with Jquery but it gives JavaScript security error. However I also tried this link
Got success but many of its links goes to 404 page as it takes my domain as base URL
You will face a security error when you apply css using javascript to an iframe that contains a page in a different domain. but this problem has a workaround by using document.domain if both documents are on the same top level domain, are using the same protocol & you can add the following line of JavaScript to the page in the iframe:
document.domain = "example.com";
the page containing the iframe needs the same line to make the domains match. Once this is in place, the script running on your main page is allowed to access properties of the document in the iframe element –
You cannot apply css to a iFrame ...
An iframe is a 'hole' in your page that displays another web page
inside of it. The contents of the iframe is not in any shape or form
part of your parent page.
From here
The reason behind that is security. If you have blabla.com in one
window and gmail.com in another one, then you’d not want a script from
blabla.com to access or modify your mail or run actions in context of
gmail on your behalf.
From here
If the iFrame is on the same domain and it doesnt violate the "Same-origin policy", you can work around this situation like this:
$('iframe').load( function() {
$('iframe').contents().find("head")
.append($("<style type='text/css'> .my-class{display:none;} </style>"));
});
Solution posted here
Anyway, if you are not violating the "Same-orgin policy", you probably don't want to use an iFrame.
This is quite a strange problem I'm experiencing. I've got a Wufoo form set up to load an external stylesheet. Wufoo is doing this properly and I can find the link tag and follow the href of that tag to the actual link and view the source of the stylesheet I've uploaded. So I know the stylesheet is indeed loading no problem (in fact, it's loading last), but not a single style is actually applied.
Right now I've even tried adding !important to my styles in an attempt to override the current styles. I don't see the styles loading into Firebug either.
Here's the link to the form.
Here's the link to the stylesheet.
The test I'm doing is in the latest version of Chrome to get the input and textarea tags to have a border-radius of 10px.
All that needed to happen was that I disable SSL for Wufoo because the protocol of my website isn't over secure HTTP. Apparently my stylesheet was being loaded, but not correctly implemented.
Here's more information on that from Wufoo.
By default, all accounts that are SSL enabled will have SSL forced
upon every form. In some settings, mainly due to browser
configuration, SSL is not desired. We can override SSL by slightly
modifying the URL for a form.
I have a servlet that generates CSS for a given colorScheme name if it exists in the database. However, should the colorScheme not be found, it issues a response.sendRedirect() to the location of the actual file on our CDN.
This works in all browsers except for IE when the CSS contains relative links to images for icons, backgrounds, etc. Every other browser uses the redirected URL (CDN url) to resolve the relative URLs in the CSS file, but IE still uses the original request URL (servlet URL).
I can't change the relative URLs to absolute URLs in the CSS files for a number of reasons I can't go in to. Is there a way to get IE to use the redirected URL instead of the request URL for the relative URL resolution?
Sounds like more of a code design problem. Personally I don't rely on IE to do anything as it should. It always lets me down :(. I would always include your CSS from the CDN at the begining of the head using the HTML LINK tag, then let the JS import overwrite it afterword. This way your website will also look decent in noscript browsers.
As a workaround you can use css #import tag instead of redirecting to the external css file.
#import url('http://www.example.org/style.css');
Since we are processing our HTML/JS in another servlet before the call to the colorScheme servlet, what I did was check to see if the requested skin was dynamic (from the servlet) or not at this stage. If the colorScheme is dynamic, I write out the link tag with the address of the CSS servlet, otherwise I write out the address of the CDN.