I have this code:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script>
document.URL = "www.google.com";
var t = document.getElementById("xjsd").innerHTML;
$('#r').html(t);
</script>
</head>
<body>
<div id="r">
</div>
</body>
</html>
I want to read a value of a balise from another website ( for example google) and write it in my own page, but it doesn't work.
This is not possible. Otherwise it would be a major security risk (imagine my site accessing your online banking site where you are currently logged in).
However, you can use a server-side script that fetches the site and then returns the HTML code or even whatever information you are looking for.
Related
Firstly, I know this nearly impossible because someone can steal cookie if this possible. But because I am still doubtful around 1%, so I think I need to ask the community, so I can completely know if this still possible or completely impossible.
Let's say I have mysite.com/promotion which is permalink for shop.org/aff.php?id=123. Id 123 is my affiliate ID. After visitor click that link, the visitor will redirected to shop.com/index.php (homepage). Then shop.com will command the visitor browser to save my affiliate cookie. Note: I have access for mysite.org but I don't have any access for shop.com.
The problem with this behaviour is that I only can promote the overall whole things about shop.org, but I cannot promote his specific product link. Because when I give the visitor a product link, I will not have any commission because the guest never access my affiliate url. But when I give him my affiliate url, he will need to find out where the product link is.
Now I will give some demo code to illustrate this.
shop.org/index.php
<?php session_start()?>
<h1>shop.com HOME PAGE</h1>
<div>cookie affiliate: <span>EMPTY</span></div><br>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" ></script>
<script type="text/javascript">
$(function(){
<?php if(isset($_SESSION['aff'])):?>
Cookies.set('aff', '<?=$_SESSION['aff']?>');
<?php endif;?>
var aff = Cookies.get('aff');
if(aff!==undefined){
$('span').text(aff);
}
})
</script>
shop.org/aff.php?id=123
<?php session_start();
$_SESSION['aff'] = $_GET['id'];
header('Location:https://shop.org/index.php');
shop.org/product.php
<?php session_start();?>
<p>shop.com PRODUCT PAGE</div>
<div>cookie affiliate: <span>EMPTY</span></div><br>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" ></script>
<script type="text/javascript">
$(function(){
<?php if(isset($_SESSION['aff'])):?>
Cookies.set('aff', '<?=$_SESSION['aff']?>');
<?php endif;?>
var aff = Cookies.get('aff');
if(aff!==undefined){
$('span').text(aff);
}
})
</script>
Try 1: hidden iframe then redirect with js / html meta
mysite.org/promotion
<!DOCTYPE html>
<html>
<head>
<title>INI REDIRECT</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="refresh" content="5;URL=https://shop.org/product.php" />
</head>
<body>
<iframe src="https://shop.org/aff.php?id=123" width="0" height="0" tabindex="-1" title="empty" style="display:none;"></iframe>
<div>You will be redirect in 5 seconds</div>
</body>
</html>
Visitor will fail to get my affiliate cookie because he get warned : A cookie associated with a cross-site resource at https://shop.org/ was set without the 'SameSite' attribute. It has been blocked, as Chrome now only delivers cookies with cross-site requests if they are set with 'SameSite=None' and 'Secure'.
Try 2: jQuery load
<!DOCTYPE html>
<html>
<head>
<title>INI REDIRECT</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="refresh" content="5;URL=https://shop.org/product.php" />
</head>
<body>
<iframe src="https://shop.org/aff.php?id=123" width="0" height="0" tabindex="-1" title="empty" style="display:none;"></iframe>
<div>You will be redirect in 5 seconds</div>
<div id="msgDiv"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" ></script>
<script>
$(function(){
$('#msgDiv').load('https://shop.org/aff.php?id=123');
});
</script>
</body>
</html>
this will fail too, because CORS policy. Remember I don't have any access to shop.org, so I can't enable this.
Try 3: scraping the cookies then give visitor that cookies
I have not given code here, because I know this will fail too. The reason is we cannot give cross domain cookie to the browser.
My question is, is this completely impossible or still possible?
Note: if only 1 site, I just need to email them to fulfill my needs. But, shop.org is only 1 example of the most common affiliate system. So this question is only focusing without any change at server. Yes, impossible, but I just have a little doubt here.
I think it's nearly impossible, because the CORS-Policy is exactly to block this cases.
You can do something like this only if the other site allows this with a specific HTTP-Header.
You can try <img src="https://shop.org/aff.php?id=123" style="height: 0; width: 0;">, but i think the result would be the same to the iframe.
Other method:
Maybe the shop-page offers this method, for example with a GET-Attribute:
shop.com/aff.php?id=123&url=/product/myproduct/
or
shop.com/product/myproduct/?aff=123
I am doing my damnedest to embed a Google trends chart into a section of my site.
In theory, it seems easy:
1.) copy script from Google:
2.) Clear a space in your webpage:
3.) Add the code:
<div class="full-row4" style="height: 300px;">
<script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/1386_RC02/embed_loader.js"></script>
<script type="text/javascript">
trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"/m/078rys","geo":"","time":"today 12-m"}],"category":0,"property":""},
{"exploreQuery":"q=%2Fm%2F078rys&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"}
);
</script>
</div>
Seems easy right? wrong!
Every time I do this, I get this result:
Upon further inspection, I found that when those scripts were loaded in, it wipes my entire body of the webpage. (Note: the chart gets loaded in thru an AJAX call containing the entire active page minus the navbars)
I've tried an array of different logic to try and get this to work, but everything I try deletes all HTML in the body tag of the webpage. (script tags are still there)
I found people with a similar issue, but it seems Google has changed how you embed these widgets into a site. Rendering any previous stackoverflow documentation useless. (at least from what I found)
you can use renderExploreWidgetTo() function instead, it takes DOM element as first parameter:
var divElem = document.getElementById('wrapper');
trends.embed.renderExploreWidgetTo(divElem,"TIMESERIES", {"comparisonItem":[{"keyword":"dbs bank","geo":"","time":"today 12-m"}],"category":0,"property":""}, {"exploreQuery":"q=dbs%20bank&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"});
Google trends embed script create an iframe at the hosting website.
Here is a simple example.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>hello</h1>
<div>
<script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/1386_RC02/embed_loader.js"></script> <script type="text/javascript"> trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"dogs","geo":"","time":"today 12-m"}],"category":0,"property":""}, {"exploreQuery":"q=dogs&date=today 12-m","guestPath":"https://trends.google.com:443/trends/embed/"}); </script>
</div>
<h1>world</h1>
</body>
</html>
As you can see, the body is not affected.
The problem is probably not with the trends scripts, but a more general issue.
Try creating an iframe at your page, does it display correctly?
I've registered a practice app for soundcloud in order to get a client id. My app doesn't have an official site because I don't want to register a domain. I'm just trying to learn how to use soundcloud using a .html and .js file. I've followed the API tutorials exactly, but nothing happens whenever I try to use soundcloud. I initialized SC using my client ID, and have imported JQuery and everything I need to. Thanks for the help
my html file (practice.html):
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="//connect.soundcloud.com/sdk.js"></script>
<script src= "script.js"></script>
</head>
<body>
<div id="player"></div>
</body>
</html>
my .js file (script.js):
SC.initialize({
client_id: 'the client id they gave me...'
});
$(document).ready(function() {
SC.get('/tracks/293', function(track) {
SC.oEmbed(track.permalink_url, document.getElementById('player'));
});
});
Again, nothing happens when I load the page...
Looks like you're missing the full url for the SoundCloud JavaScript SDK (missing http:):
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://connect.soundcloud.com/sdk.js"></script>
<script src= "script.js"></script>
</head>
<body>
<div id="player"></div>
</body>
</html>
You should be able to run this locally within your browser as SoundCloud supports Cross Origin Resource Sharing headers, removing the restriction on XSS: Of CORS We Do
I have a script tag like
<div id='CommentBox'></div>
<script src="http://www.mywebsite.com/widget.js" type="text/javascript" />
This javascript creates a comment box. (like facebook comment box)
But when users copy/paste same exact script tag more than once Chrome and IE9 does not request 2nd, 3rd file again, because it is cached. But actually people want to use comment box more than once in the same page. How can I break browser cache and force it to download as many as people pasted in their blog?
You're doing it wrong.
If you want two or more comment boxes just call the code twice. A script include is not like a function call.
Instead of Code that you write use this code:
Main HTML File:
<html>
<head>
<script src="http://www.mywebsite.com/widget.js" type="text/javascript" />
</head>
<body>
<div id="CommentBox"></div>
<script type="text/javascript">
Func1();
</script>
</body>
</html>
widget.js File:
function FUNC1(){
alert("Hello");
}
I've built a webpage that is basically a main-page with a div that is filled with different pages by using AJAX. This basically works by loading pages into a div by using innerHTML. One problem I ran into was when a page with javascript is loaded into that div all of the other code runs fine; just the javascript doesnt work.
Main-page(index.php):
<html>
<head>
<script type="text/java">
////bunch of functions////
////Ends up that page_request on this instance is 'graph.php'////
document.getElementById('mydiv').innerHTML=page_request.responseText
</script>
</head>
<body>
<div id="mydiv"><div>
</body>
</html>
Child-page(loaded in div(graph.php)):
<html>
<head>
<link rel="stylesheet" href="mystyle.css" type="text/css" media="screen" />
<script src="other_stuff.js"></script>
</head>
<body>
<script>
///bunch of script////
</script>
</body>
</html>
Now when loading the page itself (opening graph.php) I notice that everything works fine; it is just when I import graph.php to index.php through innerHTML into my div it does not work (no errors just nothing is shown). I have read through many other posts and guides and did not come up with any distictive solution; thinks I have seen were:
Put eval() around my code [I saw on a guide that this could lead
to malicious user attacks].
Create the scripts on the main page then just import the data using:
document.createElement() and .parentNode.insertBefore()
Create a listener and call the functions when I open graph.php
And this good example
Even though I am not 100% sure how this example could work because I have php populate information for the javascript to collect and then make my graph on graph.php; so if I put that function into index.php the php will already be loaded so I would have to refresh the page or call them to update information somehow. Just for some context I am ok at php but I am new and struggle with javascript so I do not know what solution would fit my situation or work the best. Any tips/examples would be greatly appreciated, thank you for your time.
From you code snippets it seems you're looking to embed complete pages within the main page. If that's the case, a more straightforward approach would be to use an iframe element instead.
For example:
...
<div id="main-page-container">
<iframe src="some-path/graph.php" scrolling="no" frameborder="no"></iframe>
</div>
...
See reference and usage example.
I would suggest using jQuery's .load() function for this.
Take a look here: jQuery API
Older browsers such as IE8 and below don't allow you insert a string that contains javascript and execute it, in any form.
Take for instance:
function addScriptText(js_code) {
var element = document.createElement("script");
element.innerHTML = js_code;
document.head.appendChild(element);
}
will not work in IE8 and below.
You must use eval to accomplish this:
function addScriptText(js_code) {
window.eval.call(window, js_code);
}
Otherwise you need to dynamically request an external js file such as:
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "externalScript.js";
document.getElementsByTagName("head")[0].appendChild(script);
Note: The page you are loading (page2.html in this example) must be on the same domain as the page that is loading it (page1.html in this example)
Working solution with jQuery:
Page 1:
<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#page2").load("page2.html");
});
</script>
</head>
<body>
<h1>Page 1 Header</h1>
<div id="page2">
</div>
</body>
</html>
Page 2:
<h2>Page 2 Header</h2>
<script type="text/javascript">
alert("Page 2 loaded and javascript executed!");
</script>