CODEWITHSUNDEEP
javascriptjquerynode.jshtml
John Murray
John Murray

Reputation: 7

Javascript security error

so i created a local web-server with node.js (watch-http-server). When i run below, it runes perfectly within stack's snippet. However, the problem comes when I i run it on the local web

SecurityError: Permission denied to access property "href" on cross-origin object

$(function(){
	alert('load');
});
body, html{
	padding: 0;
	margin: 0;
	cursor: default;
	overflow: hidden;
	background: url("../res/background.png") no-repeat;
	background-size: cover;
}
.stream-container{
	position: fixed;
	margin: 0;
	padding: 0;

	top: 2%;
	left: 5%;
}
.chat-container{
	position: fixed;
	margin: 0;
	padding: 0;
	
	top: 33%;
	left: 5%;
}
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">

<title> Twitch Bot </title>
<meta name="author" content="Author">

	<link rel="stylesheet" href="../css/styles.css">
</head>
<body>
    <div class="stream-container">
	   <iframe id = "stream-frame" src="https://player.twitch.tv/?channel=dyarambo" height="300px" width="30px" frameborder="0" scrolling="no" allowfullscreen="false"></iframe>
   </div>
   <div class="chat-container">
        <iframe frameborder="0" scrolling="no" id="chat_embed" src="https://www.twitch.tv/lovenpk/chat?darkpopout" height="300px" width="300px"></iframe>
    </div>
   	

    <!-- Javascripts below -->
    <script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>   
    <script type="text/javascript" scr="../js/index.js"></script>
</body>

</html>

Any idea?

Upvotes: 1

Views: 2213

Answers (2)

JianJian
JianJian

Reputation: 1

from MDN cross-origin security policy:

Here are some examples of resources which may be embedded cross-origin: Anything with <frame> and <iframe>. A site can use the X-Frame-Options header to prevent this form of cross-origin interaction.

And I try a test on my pc with a nodejs server listening on localhost:5555, there is no SecurityError.

Upvotes: 0

Jonathan.Brink
Jonathan.Brink

Reputation: 25413

The cross-origin security policy is being violated.

The problem resides in your usage of the iframe:

<iframe id = "stream-frame" src="https://player.twitch.tv/?channel=dyarambo" height="300px" width="30px" frameborder="0" scrolling="no" allowfullscreen="false"></iframe>

From MDN:

Error: Permission denied to access property "x"

There was attempt to access an object for which you have no permission. This is likely an element loaded from a different domain for which you violated the same-origin policy.

Since your localhost is served from a server on a different domain as player.twitch.tv you are being prohibited from accessing information on that server. This is an in-browser restriction built into the web.

Additionally, your local web app would also need to be running on the same port as the server that is serving player.twitch.tv.

Upvotes: 1

Related Questions