Youtube iFrame: Unsafe Javascript attempt to access frame - javascript

I am getting this error on a website I'm working on, I have simplified the code down to the below example, which produces this error in webkit (chrome 15.0.x), I don't see the error in firefox.
I have looked around at other SO posts regarding the same error and most of them are in reference to using the youtube API and cross domain references.
I have tried:
changing the doctype, (no difference)
adding origin params to the youtube call (no difference)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title></title>
</head>
<body class="page front logged-in no-sidebars">
<iframe width="393" height="230" src="http://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" ></iframe>
</body>
</html>

This is a common issue with cross-site messaging (where one page/website communicates with another page/website via an IFrame using javascript callbacks as a medium). It doesn't always work out and some browsers may not always catch the callback event and may register it as a security error if the protocol or port differs.

Related

WebSocket within iframe sandbox fails on Firefox, but works on Edge/Chrome

The following code shows an <iframe sandbox... pointing to a page that opens a test websocket with a message on successful open. It works correctly on Chrome and Edge printing the It worked! message immediately.
On Firefox it fails with Uncaught DOMException: The operation is insecure. and no further reasoning.
<!DOCTYPE html>
<html lang="en">
<body>
<iframe
sandbox="allow-scripts"
src="https://firefox-wss-example.tiiny.site/"></iframe>
</body>
</html>
The linked websocket page source code is simply as follows:
<!DOCTYPE html>
<html lang="en">
<body>
<script>
const ws = new WebSocket('wss://demo.piesocket.com/v3/channel_1?notify_self');
ws.addEventListener('open', () => {
console.log('It worked!');
});
</script>
</body>
</html>
I have tried a mixture of wss:// and ws://, as well as permissive CORS headers, but none of my attempts fix the issue on Firefox despite having an appropriate setup. I am starting to think this is a Firefox 97 bug but am unsure of how to verify.
Why does this snippet work on most browsers but fails on Firefox?
I've been through this before, spend weeks on investigations, what I found is: Firefox runs sandboxed JavaScript under the blob:// protocol, and you're only allowed to upgrade to WebSocket from http:// and https:// connections. blob:// isn't either.
Although it's not very clear in their documentation, you may take a look into the websocket upgrade implementation as well as in this issue about CSP inheritance to understand it better, but it's basically the way Firefox have chosen to implement Sandboxing.
We never found a workaround for this, the only way was to drop the Sandboxing, or drop Firefox support for this specific feature.
On the other hand, Chromium based browsers saves the script file locally (I cannot say with 100% of confidence if it is stored in a temporary directory or virtual file system), and still uses the http:// protocol to access them, this way you can upgrade to ws:// or wss://. Those browsers may also inherit CSP, since they keeps the opener instance.
Edit: This problem is not tied to an specific Firefox version, it has been implemented this way for a long time. I has been 5 or 6 releases from the time I went into this problem, it still this way, and will probably stay this way, it's not considered a bug and it's not close to a highly requested feature.

Problems with map's script API

I'm trying to use maps api (yandex but I have seen similar problem in google maps too) and include its script in head:
<!DOCTYPE html>
<html lang="en">
<head>
<title>site</title>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/postscribe/2.0.8/postscribe.min.js">
<script async src="https://api-maps.yandex.ru/1.1/index.xml" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function () {
var map = new YMaps.Map(document.getElementById("YMapsID"));
map.setCenter(new YMaps.GeoPoint(59.938518, 30.323342), 10);
};
</script>
</head>
Here is body:
<body>
<div class="map-block_map-item">
<div id="YMapsID" style="width:100%;height:100%">
</div>
</div>
</body>
But when page downloads I get this warning:
"It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened."
If I don't use async attribute get this message:
A parser-blocking, cross site (i.e. different eTLD+1) script, https://api-maps.yandex.ru/1.1/_YMaps.js?v=1.1.21-58, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See https://www.chromestatus.com/feature/5718547946799104 for more details
How can I solve this problem? As I understood it happens on very slow connections (but I have rather fast connection so why?) and it cause block document.written scripts. (I'm new in js so yes I have google it but didn't understand how it can be improve besides async script download)

Youtube subscribe button not showing

I am trying to include a YouTube subscribe button in localhost and it does not seem to work, while in JSfiddle it works perfectly fine. Am I doing something wrong? I am using code from https://developers.google.com/youtube/youtube_subscribe_button
My code on localhost:
<!DOCTYPE html>
<html>
<head>
<title>Testing a YouTube button</title>
<script src="https://apis.google.com/js/platform.js"></script>
</head>
<body>
<div class="g-ytsubscribe" data-channelid="UCWTfbcQsyNLv1ZLsZrhVW2w" data-layout="full" data-count="default"></div>
</body>
</html>
JSFiddle example
Thanks!
It works fine when I test it on http://localhost, but it fails when I test it using a file:// URL.
The console reports:
cb=gapi.loaded_0:45 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('file://') does not match the recipient window's origin ('null').
The script only works when you load the webpage of HTTP(S). Don't try to use it on file: URLs (and always look at the console for error messages!).

iframe mixed content warning without mixed content

Maybe I'm just losing my mind here, but I keep getting mixed content warnings for this page:
<!doctype html>
<html lang="en-us">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<iframe scrolling="no" id="slides" src="admin/slides.html"></iframe>
<iframe scrolling="no" id="sidebar" src="/sidebar"></iframe>
<iframe scrolling="no" id="ticker" src="/clock2"></iframe>
</body>
</html>
It's confusing me greatly, since everything is on the same domain, and all pages are served over https. To add to the confusion, the first iframe actually works without a warning, the second two don't. Also, the second two pages work just fine over https when you go to them directly. They don't even exist on http - my .htaccess redirects to https. All the resources are loaded over https. I've even tried using the fqdn with the https prefix in the src instead of a relative reference, but it doesn't help.
What am I missing?
I'm not quite sure why it happends, but the redirect from /sidebar to /sidebar/(index.html) is going over HTTP. I'm pretty sure replacing the links with /sidebar/index.html or just /sidebar/ would resolve your issue.
I just tested it, here's a screenshot of the links /sidebar/ and /clock2/ loading over https. http://puu.sh/nzsnu/b421dfb4bd.png

How to get iframe html from diff origin

Here is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
<iframe id="1" src="https://bing.com" frameborder="2" height="300px" width="800px"></iframe>
</body>
</html>
When i type $('#1').contents() in chrome console, it raise:
Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "http://localhost:63342" from accessing a cross-origin frame.
my question is: How to get the html of iframe(I found exist question can't fix my question)
my question is: How to get the html of iframe(I found exist question can't fix my question)
If the exist question said "you can't do that", then the exist answer is correct
However, if the site you wish to read has CORS set, then you could read the raw html (not from the iframe though)
There is a possibility by using a browser add-on, but I'm guessing you don't want to do this too obviously, i.e. instruct visitors to your site to download and install a browser add on

Categories