insert JS object into a script tag without scraping syntax

Question

Desired output

<script type="text/javascript">
var = {
//myobject
}
</script>

Current thinking

var fileRef = document.createElement('script');
fileRef.setAttribute('type','text/javascript');
var = { //blahblahblah }
fileRef.setAttribute('innerHTML', var); << this is wrong
document.head.appendChild(fileRef);

Ideally I need to use something similar to innerHTML to inject the variable inside of a script tag

This is Janky but the client is demanding to edit the Object inline in optimizely so my hands are tied

I eventually convinced the client this was a terrible idea based on a terrible requirement and now they happily edit the object in an external file which I load through optimizelys jank script loader. — James Claridge
– James Claridge, Commented Sep 26, 2018 at 3:40

Derek 朕會功夫 · Accepted Answer · 2018-09-24 05:27:58Z

1

If the only thing you want to do is to add an JavaScript object onto the global namespace, and the content inside is strictly restricted to strings, numbers and booleans, then you can do that safely by:

let userEnteredString = '{"foo": "bar"}';
window[keyName] = JSON.parse(userEnteredString);

If it can contain values other than literals for the aforementioned types, then you can use the unsafe eval method (not recommended!):

let existingValue = "bar";
let userEnteredString = '{"foo": existingValue}';
window[keyName] = eval(`(${userEnteredString})`);  // not safe, only use this when
                                                   // absolutely needed

Note that these two snippets will not modify any script tags, though they will have the same effect when executed before any other related script tags.

edited Sep 24, 2018 at 5:27

answered Sep 24, 2018 at 2:17

Derek 朕會功夫

94.8k45 gold badges199 silver badges255 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

insert JS object into a script tag without scraping syntax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related