I am connecting my website to several APIs like Firebase and Pusher. However, all of the credentials written within javascript are exposed to public. Is it sensitive? What is the good practice in dealing with this?
Below are some example of my API.
Firebase
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "MyAPIKey",
authDomain: "myapp.firebaseapp.com",
projectId: "myapp",
storageBucket: "myapp.appspot.com",
messagingSenderId: "12345678",
appId: "1:12345678:web:e812345678b",
measurementId: "G-0001"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
Pusher
var pusher = new Pusher('XXXXX', {
encrypted: false,
cluster: 'mt1',
wsHost: '127.0.0.1',
wsPort: 6001,
});
var user_id = 11;
var channel = pusher.subscribe('msg' + user_id);
channel.bind('App\\Events\\Messaging', function(data) {
console.log(data.message);
});
Take a look at the source Linode dashboard. How did the accomplished this? The exposed code is so little.
<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="theme-color" content="#000000"/><script type="text/javascript" src="/new-relic.js"></script><link rel="manifest" href="/manifest.json"/><link rel="shortcut icon" href="/favicon.ico"/><link rel="apple-touch-icon" href="/assets/logo-192-apple.png"/><link rel="stylesheet" href="/fonts/fonts.css"/><title>Linode Manager</title></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="session-iframe"></div><div id="root"></div><script src="/static/js/main.339b6f48.js"></script></body><script src="https://static.ada.support/embed.be6a6728.min.js" charset="utf-8"></script><script>window.setTimeout(()=>{var t=document.getElementsByClassName("ada-iframe")[0];t&&t.setAttribute("title","Ada Support Chat Bot")},2e3)</script></html>