I have added this code to my website (before the closing body):
<script type="text/javascript">
var vglnk = {key: '123456789'};
(function(d, t) {
var s = d.createElement(t);
s.type = 'text/javascript';
s.async = true;
s.src = '//cdn.viglink.com/api/vglnk.js';
var r = d.getElementsByTagName(t)[0];
r.parentNode.insertBefore(s, r);
}(document, 'script'));
</script>
(The key above is just a dummy key. In my production environment I have used the correct key.)
However, in Chrome's developer console I get the following error:
www.mywebsite.com/:1 Refused to execute script from 'https://api.viglink.com/api/sync.js?key=123456789' because its MIME type ('image/gif') is not executable.
Why is this happening? What am I doing wrong?
Are you sure your key is correct?
The gif response could be how viglink is handling invalid requests - if the key is not valid, return a gif. Directly visit https://api.viglink.com/api/sync.js?key=123 in your browser and it returns GIF.
However, I tested it with a valid key:
https://api.viglink.com/api/sync.js?key=<valid-key>
and it returned the sync.js javascript file
The problem is that you have a <script> element that is trying to load some external JavaScript.
The URL you have given - it possibly points to a GIF file and not a JavaScript program.
The server is correctly reporting that it is GIF so the browser is aborting with that error message instead of trying to execute the JSON as JavaScript (which would throw an error).
try this
<script type="image/gif">
Now the browser knows it isn't trying to load JavaScript, so it ignores the script element entirely