myHotTake

Tag: safe coding practices

  • Why Avoid Using eval() in JavaScript? Discover the Risks!

    Hey there! If you find this story interesting or helpful, feel free to like or share it with your fellow coding enthusiasts!


    I’m back in art class (I am terrible at art), surrounded by tubes of colors, each promising a unique hue. My teacher always warned us about experimenting too freely without understanding the basics. But there’s this one seemingly tube labeled “eval()” that catches my eye. It promises to mix colors instantly and produce anything I wish for. Intrigued, I decide to give it a try.

    With a sense of wonder, I squeeze a bit of red paint onto the palette and reach for the “eval()” tube. As I start mixing, it seems to work perfectly, creating a stunning shade of orange as it combines with the yellow. My excitement grows; it feels like I can create anything without the usual effort. But then, to my horror, I notice it starts pulling in other colors without my consent—some blue from one side, a splash of green from another. My beautiful orange turns into a murky brown, the original vision lost in the chaos.

    I soon realize that “eval()” is unpredictable and uncontrollable. It doesn’t just mix the colors I want; it grabs anything nearby, even if it ruins the artwork. My art teacher’s voice echoes in my mind, reminding me of the risks of taking shortcuts. The allure of this tube was a shortcut, indeed, but one fraught with danger.

    Determined to create something beautiful and safe, I set aside the “eval()” tube. I pick up my brushes and start mixing colors manually, just as I was taught. It takes a bit longer, but I have full control over each hue and shade. I use well-known techniques instead of risky shortcuts, ensuring my masterpiece is both secure and true to my vision.

    So, while “eval()” promised magic, I learned that understanding the process and taking deliberate, careful steps is the true art of painting—and coding. If you enjoyed this little story, maybe give it a like or share it with someone who might appreciate it too!


    After my colorful adventure in art class, I realized that the unpredictability of the “eval()” tube parallels the risks associated with using eval() in JavaScript. Just as the tube mixed unintended colors, eval() executes strings as code, which can lead to unpredictable and potentially harmful outcomes.

    I have a simple JavaScript program that calculates the sum of two numbers. Using eval(), it might look something like this:

    let num1 = 5;
    let num2 = 10;
    let result = eval('num1 + num2');
    console.log(result); // Outputs: 15

    At first glance, it seems harmless, just like the initial mix of red and yellow. However, if the input comes from an untrusted source, it can lead to security vulnerabilities. For example:

    let userInput = '5 + 10; console.log("Hacked!")';
    let result = eval(userInput);
    console.log(result); // Outputs: 15 and executes console.log("Hacked!")

    This snippet demonstrates how eval() can execute arbitrary code, akin to the chaotic mixing of colors without control.

    To avoid the pitfalls of eval(), I turn to safer, more structured methods—just like using brushes instead of that tempting tube. Here’s how I can calculate the sum without eval():

    let num1 = 5;
    let num2 = 10;
    let result = num1 + num2;
    console.log(result); // Outputs: 15

    By directly performing operations, I maintain control over the code execution, ensuring it only does what I intend.

    Key Takeaways/Final Thoughts:

    1. Avoid eval(): It can execute arbitrary code, leading to security vulnerabilities and unexpected behaviors.
    2. Use Alternatives: Direct manipulation of variables and functions provides safer and more predictable outcomes.
    3. Sanitize Input: Always ensure that any input used in your code is sanitized and validated to prevent injection attacks.
    4. Understand the Risks: Just as in art, understanding the tools and their implications is crucial for creating secure and efficient code.
  • How Do Third-Party Scripts Threaten JavaScript Security?

    🔥 Hey there, if you enjoy this story, feel free to give it a like or share it with your fellow campers! Now, let’s dive into the tale.


    I’m out in the woods, eager to build the perfect campfire. I’ve gathered my logs, kindling, and matches, preparing to create a warm, cozy blaze where my friends and I can huddle up and share stories. But here’s the twist: I’m not alone in this adventure. I’ve also invited a few friends who promised to bring their own unique ingredients to make my campfire even more spectacular.

    As I carefully stack the logs, one of my friends, let’s call him “Third-Party Tom,” arrives with a bag. He insists it’ll make the fire brighter and give off a aroma. Intrigued, I decide to sprinkle a little of Tom’s special powder onto the fire. At first, everything goes smoothly, and the fire indeed glows with a hue. But suddenly, unexpected sparks fly out, threatening to ignite the nearby bushes. I realize that, while Tom’s addition seemed beneficial, it also introduced unforeseen risks to my once carefully controlled campfire.

    In this story, my campfire is like my JavaScript application, and Third-Party Tom represents third-party scripts. Just like how Tom’s powder had the potential to enhance the fire but also posed a threat, third-party scripts can offer valuable features and functionalities to my application. However, they might also introduce security vulnerabilities or performance issues that could spread like an out-of-control wildfire.

    As I quickly grab a bucket of water to douse the rogue sparks, I remind myself of the lesson learned: while collaborating with others can enhance the experience, it’s crucial to be cautious and vigilant. I need to ensure that anything added to my campfire—or my JavaScript application—is thoroughly vetted and monitored to keep the environment safe and enjoyable for everyone gathered around. 🔥


    In the world of JavaScript, third-party scripts are often included to provide functionalities such as analytics, social media widgets, or advertisements. Here’s a simple example of how I might include a third-party script in my HTML:

    <script src="https://example.com/some-third-party-script.js"></script>

    While this script can add useful features, it also comes with risks. One concern is that it can execute malicious code if the third-party source is compromised. For example, imagine the script altering my application’s behavior or accessing sensitive user data without permission.

    To mitigate these risks, I can implement several security practices:

    1. Subresource Integrity (SRI): This allows me to ensure that the script hasn’t been tampered with. By including a hash of the script, the browser can verify its integrity:
       <script src="https://example.com/some-third-party-script.js" integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/ux5k9YB02X31p1B4jLk9xI/4Jc2X7W" crossorigin="anonymous"></script>
    1. Content Security Policy (CSP): This is like setting boundaries around my campfire, preventing the sparks from flying into unwanted areas. It restricts where resources can be loaded from:
       <meta http-equiv="Content-Security-Policy" content="script-src 'self' https://example.com;">
    1. Regular Audits and Monitoring: Just as I keep an eye on my campfire, I need to regularly audit and monitor the scripts I use, ensuring they’re still trustworthy and necessary.

    Key Takeaways:

    • Vigilance is Key: Always vet and monitor third-party scripts to prevent security breaches.
    • Use Security Measures: Implement SRI and CSP to safeguard your application.
    • Regular Audits: Stay proactive in reviewing the necessity and safety of external scripts.