0

Newbie question from a UX designer been trying to get this working for 2 days now.

I am trying to test out matthew dove's inject script in codepen https://github.com/Matthew-Dove/Inject

I have copied the raw github file using jsdelivr into the Pen settings. When I click on the eye icon I can see the .js file.

settings picture

I have copied the example code provided by Matthew into the html panel.

enter image description here

But as you can see in the image above the website does not get injected. My codepen is https://codepen.io/lisatw/pen/oNXxgMR 

<html lang="en">
<head>
<meta charset="utf-8">
<meta content="initial-scale=1,width=device-width" name="viewport">
<title>Inject</title>
</head>
<body>
<h4>Below this heading the world's first website will be injected</h4>

<div data-inject-src="http://info.cern.ch/" style="height: 175px;"> </div>

<h4>Above this heading the world's first website will be injected</h4>


</body>
</html>

I have tried with and without the call to the .js library

<script src="./inject.js"></script>

Any help mightly appreciated.

Lisa Tweedie
  • 103
  • 4

1 Answers1

2

When you add a script on CodePen by URL, this URL will be injected as is before </body>. There is no need to explicitly adding script like this:

<script src="./inject.js"></script>

Because right after that, CodePen automatically adds another script:

<script src="https://cdn.jsdelivr.net/gh/Matthew-Dove/Inject@master/src/inject.js"></script>

But the code doesn't work for another reason. This issue applies even to Matthew's https://rawgit.com/Matthew-Dove/Inject/master/src/example.html example, yahoo APIs (https://query.yahooapis.com/v1/public/yql) under the hood no longer available. https://twitter.com/ydn/status/1079785891558653952

Unfortunately, there is nothing you can do about it.

artanik
  • 2,599
  • 15
  • 24
  • Oh you star... at least I can stop thinking that I am being incredibly stupid! – Lisa Tweedie Feb 15 '20 at 17:49
  • 1
    Checked out alternatives from the original repository and they don't work either. I will try to write another alternative script, I hope this time it works. But I don't know another service like this though. – artanik Feb 15 '20 at 18:12
  • Yes I tried them too. I did find this on stack overflow: https://stackoverflow.com/questions/54046823/yql-query-service-replacement-now-that-yahoo-shut-it-down – Lisa Tweedie Feb 15 '20 at 18:50
  • Also the import content alternative github.com/AndersDJohnson/html-imports-content Has this caniuse.com/#feat=imports - it says "Deprecated method of including and reusing HTML documents in other HTML documents. Superseded by ES modules" – Lisa Tweedie Feb 15 '20 at 19:16
  • 1
    It turned out that is no easy way to make a request to another server. That's why they used a proxy server to bypass CORS policy, which browser using a lot for security reasons. Some servers in response send Access-Control-Allow-Origin header (which helps) and some don't (e.g. old maybe). https://stackoverflow.com/questions/20035101/why-doesn-t-postman-get-a-no-access-control-allow-origin-header-is-present-on – artanik Feb 15 '20 at 20:12
  • 1
    There are two options, you can simply use an iframe to display the site without any control over it. Or you need to use your own server to make a request to resource and then send it back to your site as HTML. Third-party proxy servers are unreliable and can be disabled at any time (like yahoo APIs). – artanik Feb 15 '20 at 20:12
  • I guessed it was because of security issues with cross site scripting attack issues being such an issue these days. An iframe won't work I don't think because I do want to alter the styling of the injected site. My requirement is initially for internal use so I can do something server side but I was hoping it could be used more generally which is why I was looking for a client side solution. The other way to do what I want is using an browser extension or a collection of bookmarklets. Thanks very much for checking it out on. . – Lisa Tweedie Feb 15 '20 at 22:36