How to pass variable to index.html in angular securely

Question

i have script tags for my payment gateway in my index.html

  <script type="text/javascript" src="https://app.sandbox.midtrans.com/snap/snap.js"
    data-client-key="my-data-client-key">
    </script>

my data-client-key is showing up in head tags, is it okay or should it be secured? if it need to be secured, how can i secure it? i have read this post How to pass variable data to index.html in angular? but still i wonder is my key should be hidden or not. and of course i have others key too, like analytics, can i hide it?

EDIT

i added this to my main.ts

if (environment.production) {
  enableProdMode();
  // HACK: Don't log to console in production environment.
  // TODO: This can be done in better way using logger service and logger factory.
  if (window) {
    window.console.log = window.console.warn = window.console.info = function () {
      // Don't log anything.
    };
  }
  document.write('<script type="text/javascript" src="https://app.sandbox.midtrans.com/snap/snap.js" data-client-key="'+environment.midtransKey+'" ></script>');
} else {
  document.write('<script type="text/javascript" src="https://app.sandbox.midtrans.com/snap/snap.js" data-client-key="'+environment.midtransKey+'" ></script>');
}

the script tag for midtrans not showing up, and i got core.js:6014 ERROR ReferenceError: snap is not defined

The key is going to be used in the frontend anyway unless there is another reason why you will want to store it in the environments, its not worth it. It will be visible to all in the header tag — Obed Amoasi, Sep 27 '20 at 06:39
i store several keys for this apps, my backend who are deploying this apps to hosting so he only change the key in env — naoval, Sep 27 '20 at 09:48

Aian · Answer 1 · 2020-09-27T07:39:33.643

0

You have two choose

Insert this script tag from angular

import { environment } from './environments/environment';
  
const script = document.createElement('script');  
script.src = "https://app.sandbox.midtrans.com/snap/snap.js";  

if (environment.production) {
    script.setAttribute("data-client-key","my-data-client-key")
} else if (environment.staging) {
    script.setAttribute("data-client-key","my-data-client-key")
}
document.head.appendChild(script);

Edit variable from angular by custom key

var html = document.documentElement.innerHTML
document.documentElement.innerHTML = html.replace("my-data-client-key", environment.variable)

there is no problem to show client key because the provider will restrict to use client key per domain etc....

in your case the documentation mention to put client key in html https://snap-docs.midtrans.com/#frontend-integration

edited Sep 27 '20 at 07:39

answered Sep 27 '20 at 05:58

Aian

226
3
10

yes i see, i'm using number 1 so my friend only changing the key in my env, but it doen't show up in my html – naoval Sep 27 '20 at 06:15
also i use your second solutions, still not showing up – naoval Sep 27 '20 at 06:27
https://stackoverflow.com/questions/12574098/is-document-write-actually-deprecated – Phix Sep 27 '20 at 06:31
I have updated my answer , I prefer to use first solution , the document.write is not good to use – Aian Sep 27 '20 at 07:40

score 0 · Answer 2 · answered Sep 27 '20 at 06:18

Once the Key is to be used in the frontend, there is no way of hiding it. Eventually, it should be in the header tag or somewhere on the page for the required processing to be done

From their documentation, this is a client Key, so there isn't much to worry about. Also Mid Trans accepts merchant Url and other callback URLs, by which they restrict payment and redirection. Assuming these are not as they say, the only thing someone can do is to execute a payment transaction on your behalf into your account.

For Google analytics, there is also not much you can do, but with this, the data you collect can be polluted if someone gets your key, So I will suggest you create a filter on your analytics page and restricting only hits that match your domain. Check out this post on how to do that.

How to pass variable to index.html in angular securely

2 Answers2