如何在index.html文件中为脚本导入src

Question

Currently in my index.html file I have the following script line:

<script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&libraries=places"></script>

Is it possible to extract the src variable and import it in the script as a variable? I tried using xsl:variable located in an external variable.xsl file such as this:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<xsl:variable name="google" select="API_KEY"></xsl:variable>

</xsl:stylesheet>

And then trying to import it into my script,

<xsl:include href="variable.xsl"/>
<script src="{$google}"></script>

But even when the xls:variable is in the same file, the script source doesn't work.

I would like to push my code to a public repo, which is why I'd like to hide the key.

Answer 1

Hope this is the answer you are looking for, by simply using JQuery you could add the src attribute dynamically

HTML

<script id="googleAPI">

Notice we set an id on the script element

Javascript

let url = "https://maps.googleapis.com/maps/api/js?key=MY_KEY&libraries=places"
$("#googleAPI").attr("src", url)

Answer 2

You cannot hide something client side, only obfustucate it (make it harder to see). If you use the xsl file, I can make a request and see that, if you set the dynamically create the script, I can open the network tab see where the request is going. If you want to hide the key:

• make a request from your own server to "https://maps.googleapis.com/maps/api/js?key=MY_KEY&libraries=places"
• get the content as text/plain or convert it to dataURl and then send it to client side where you create a script tag and set the textContent , innerHTML , or create an object url from Blob (having the server response as Blob part) and set src etc.