Logo
    Search

    HTTPS + Tunnel Your Localhost - Cloudflare Tunnels, Ngrok, and more!

    enMarch 20, 2023

    Podcast Summary

    • Exploring web streams, digital DRM, and local hostingWeb streams enable efficient downloads, digital rights management poses challenges, and local hosting can be secured with HTTPS tunneling

      Web streams are a powerful tool that allows for incremental data transfer, making it possible to download large files, like GitHub tarballs, almost instantly. This was accomplished in Node by writing the tarballer using streams, which was a major advantage when Node was first released. Another idea discussed was the potential for watermarking downloaded content, such as video files, with the user's name. However, implementing this would require a video processor. The conversation also touched upon the fascinating world of digital DRM and the challenges it presents. Additionally, they mentioned tunneling local hosts in HTTPS, a necessary skill for accessing secure contexts locally or making local hosts available to the outside world. Overall, the discussion highlighted the importance of understanding and utilizing various web development tools and techniques.

    • SSL certificates for local host: Essential for certain JavaScript APIsSSL certificates enhance local host security, enabling functional JavaScript APIs and efficient code issue resolution

      During the Napster era, record companies faced issues with early release copies being leaked online before official releases. Now, shifting gears to the topic at hand, an SSL certificate for a local host might seem unnecessary, but it's essential for certain JavaScript APIs to function. Although local host is considered a secure context, having an SSL certificate provides additional security and eliminates the need to run multiple applications on different ports. Sentry, a developer-first application monitoring tool, is a sponsor of this discussion, offering insights into code issues and helping developers resolve them efficiently.

    • Managing complexities of local web developmentUsing local domain names, tools like Caddy server, and replicating production environment can help manage complexities in local web development, ensuring a smooth transition to live deployment.

      Developing locally for web projects involves managing various complexities, such as caching issues, browser history, and secure origins. To mitigate these challenges, using local domain names like ".local" or ".dev" can be helpful, but it may require obtaining HTTPS certificates. Tools like Caddy server can simplify this process by providing both a locally generated SSL certificate and the ability to develop locally. Replicating the local environment as closely as possible to the production environment, including handling cookies and authentication, is crucial to ensure a smooth transition to live deployment. Using a local development environment that closely mirrors the production environment can help minimize potential issues.

    • Securing Web APIs and Protecting Sensitive DataEnsure secure contexts for APIs like WebRTC, geolocation, and clipboard API. Prioritize security measures to protect user data and maintain privacy, even when integrating with external services.

      Maintaining a secure web environment involves understanding the importance of secure contexts for various web APIs and ensuring that sensitive data is protected. This includes APIs like WebRTC, geolocation, and the clipboard API, which can be used for fingerprinting and potentially exposing user information. While local testing may not require HTTPS, it is essential to have a secure context to access these APIs. Additionally, there are instances where applications must be open to the outside world to integrate with certain services, such as Apple Pay, which requires a verified domain name and cannot be run locally. Overall, it's crucial to prioritize security measures to protect user data and maintain privacy.

    • Securely Accessing Local Servers with TunnelingTunneling creates a secure connection between the public internet and your local machine, allowing services access for transactions and webhooks. Be cautious when exposing your local server to ensure sensitive files and routes remain hidden.

      When developing applications, particularly those involving online payments or webhooks, it's essential to make your local server publicly accessible through a technique called tunneling. This allows services like Stripe and Snipcart to access your local server and validate transactions or webhooks. Tunneling creates a secure connection, akin to a tunnel under a fence, connecting the public internet to your local machine. However, it's crucial to be cautious when exposing your local machine, ensuring you don't unintentionally expose sensitive files or routes. A popular solution is using Cloudflare Tunnels, which simplifies the process of setting up a tunnel and provides additional security features. Remember, though, that tunneling grants outside access to your local machine, so always be aware of what you're making accessible.

    • Access local development environments with Ngrok and Cloudflare tunnelsUse Ngrok or Cloudflare tunnels to create publicly accessible URLs for local development environments, enabling collaboration and integration, with free options available but additional costs for permanent setups or consistent domain names.

      Ngrok and Cloudflare tunnels are useful tools for creating publicly accessible URLs for local development environments. This allows others to access and test applications in progress, making collaboration and integration easier. Both services provide free options, but for permanent setups or consistent domain names, additional costs may apply. Engrok, a popular choice, now costs $120 per year, while Cloudflare tunnels offer a free solution. It's essential to consider the reliability and consistency of the domain names provided, as well as the long-term costs, when deciding which tool to use. Additionally, be aware that free services may come with limitations or potential risks, such as data being used for advertising purposes.

    • Using Custom Domains with Local Development TunnelsEnhance user experience and security by setting up custom domains for local development tunnels. Paid services like Tunnel 2.0 and Cloudflare offer easy setup and consistent domain names.

      Using custom domain names with local development tunnels can enhance the user experience and provide additional security. However, setting up these custom domain names can be a complex process, and free options may come with limitations or interstitials that hinder the crawling process. Paid services like Tunnel 2.0 offer consistent domain names and easier setup for a small fee. Cloudflare is another popular option that allows users to set up custom domain names for their tunnels, providing a professional appearance and real-time updates for clients. While setting up a custom domain name involves additional steps, the benefits can outweigh the inconvenience for developers seeking a more seamless and secure local development experience.

    • Use Cloudflare as a reverse proxy for Synology NAS HTTPS setupImplement access control at Cloudflare level for added security, protect sensitive websites, and access local applications remotely with Cloudflare's reverse proxy setup, while noting potential terms of service violations.

      When attempting to set up HTTPS on a Synology NAS and encountering issues, an alternative solution is to use Cloudflare as a reverse proxy and implement access control at the Cloudflare level for added security. This setup allows users to tunnel all traffic through a custom domain and protect sensitive websites from unauthorized access, without the need for coding modifications. However, it's important to note that using Cloudflare in this way may be against Synology's terms of service. Another challenge users may face is not being able to access local applications, such as Home Assistant, when outside the house. This setup can be particularly useful for securing and accessing local applications from remote locations. Additionally, Cloudflare's Access Control feature offers a generous free tier, making it an attractive option for implementing access control without additional costs. Overall, this setup provides an added layer of security and convenience for accessing local applications and websites from anywhere.

    Recent Episodes from Syntax - Tasty Web Development Treats

    790: State of JS 2023 Reactions

    790: State of JS 2023 Reactions

    Scott and Wes dive into the 2023 State of JavaScript survey, breaking down the latest trends and pain points in front-end frameworks, build tools, and JavaScript runtimes. Tune in for their hot takes and insights on what’s shaping the JavaScript landscape this year!

    Show Notes

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    789: Do More With AI - LLMs With Big Token Counts

    789: Do More With AI - LLMs With Big Token Counts

    Join Scott and CJ as they dive into the fascinating world of AI, exploring topics from LLM token sizes and context windows to understanding input length. They discuss practical use cases and share insights on how web developers can leverage larger token counts to maximize the potential of AI and LLMs.

    Show Notes

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    CJ: X Instagram YouTube TwitchTV

    Randy: X Instagram YouTube Threads

    788: Supabase: Open Source Firebase for Fullstack JS Apps

    788: Supabase: Open Source Firebase for Fullstack JS Apps

    Scott and CJ chat with Paul Copplestone, CEO and co-founder of Supabase, about the journey of building an open source alternative to Firebase. Learn about the tech stack, the story behind their excellent documentation, and how Supabase balances business goals with open-source values.

    Show Notes

    • 00:00 Welcome to Syntax!
    • 00:30 Who is Paul Copplestone?
    • 01:17 Why ‘Supa’ and not ‘Super’?
    • 02:26 How did Supabase start?
    • 08:42 Simplicity in design.
    • 10:32 How do you take Supabase one step beyond the competition?
    • 12:35 How do you decide which libraries are officially supported vs community maintained?
      • 15:17 You don’t need a client library!
    • 16:48 Edge functions for server-side functionality.
    • 18:51 The genesis of pgvector.
    • 20:59 The product strategy.
    • 22:25 What’s the story behind Supabase’s awesome docs?
    • 25:26 The tech behind Supabase.
    • 35:46 How do you balance business goals with open source?
    • 42:01 What’s next for Supabase?
    • 44:15 Supabase’s GA + new features.
    • 48:24 Who runs the X account?
    • 50:39 Sick Picks + Shameless Plugs.

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    CJ: X Instagram YouTube TwitchTV

    Randy: X Instagram YouTube Threads

    787: You Should Try Vue.js

    787: You Should Try Vue.js

    Scott and CJ dive deep into the world of Vue.js, exploring what makes this frontend framework unique and why it stands out from React and Svelte. CJ gives a comprehensive tour, covering everything from getting started to advanced features like state management and Vue’s built-in styles.

    Show Notes

    Vue.js: The Documentary.

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    786: What Open Source license should you use?

    786: What Open Source license should you use?

    Scott and CJ dive into the world of open source, breaking down its meaning, benefits, and the various types of licenses you’ll encounter. From permissive licenses like MIT and Apache 2.0 to copy-left licenses such as GNU GPLv3, they’ll help you choose and apply the right license for your project.

    Show Notes

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    785: What’s Next for NextJS with Tim Neutkens

    785: What’s Next for NextJS with Tim Neutkens

    Scott and Wes dive into the world of Next.js with special guest Tim Neutkens from Vercel. They explore the latest updates, including the React Compiler and React Server Components, discussing their impact on developer workflows and the future of Next.js development.

    Show Notes

    • 00:00 Welcome to Syntax!
    • 00:30 What does the React Compiler do?
    • 05:04 Will React Compiler help with managing Context?
    • 06:39 What happens if you’re not using a React Compiler?
    • 09:30 Will this work on any NextJS version?
    • 12:18 What are React Server Components?
    • 16:28 Shipping all the data inside an encapsulated component.
    • 20:17 Clearing up the frustrations around retrofitting server components.
    • 23:13 Handing migration.
    • 28:30 Is this just a fetch request with props?
    • 36:41 How closely are the NextJS and React teams working?
    • 41:53 Will we ever get Async Client Components?
    • 43:52 Async Local Storage API.
    • 45:31 Turbopack.
    • 57:51 Sick Picks & Shameless Plugs.

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    784: Logging × Blogging × Testing × Freelancing

    784: Logging × Blogging × Testing × Freelancing

    In this Potluck episode, Scott and Wes tackle listener questions on modern blogging, website environmental impact, and using LangChain with LLMs. They also cover CSS hyphens, unit vs. integration testing, and balancing web development with new parenthood.

    Show Notes

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    783: How We Built a Netflix Style “Save for Offline” Feature Into Syntax

    783: How We Built a Netflix Style “Save for Offline” Feature Into Syntax

    Scott and Wes dive into the world of browser caching for audio files, exploring the File System API and the Cache API. They discuss size restrictions across different browsers, how tools like Riverside.fm leverage IndexedDB, and walk through code examples for creating, retrieving, and managing cached audio data.

    Show Notes

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott:X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    782: The Developer’s Guide To Fonts with Stephen Nixon

    782: The Developer’s Guide To Fonts with Stephen Nixon

    Scott and CJ are joined by Stephen Nixon of ArrowType to delve into the world of fonts and type for developers. They explore the intricacies of font creation, the utility of variable fonts, and offer tips for making visually appealing typography on the web.

    Show Notes

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott:X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    781: Potluck - The Value of TypeScript × Vue vs Svelte × Leetcode

    781: Potluck - The Value of TypeScript × Vue vs Svelte × Leetcode

    In this potluck episode of Syntax, Scott and CJ serve up a variety of community questions, from the nuances of beginner vs. advanced TypeScript to the pros and cons of SvelteKit. They also discuss falling out of love with React, shipping private packages via NPM, and the eternal struggle of always starting but never finishing projects.

    Show Notes

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott:X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    Related Episodes

    Increased Complexity - ESW #229

    Increased Complexity - ESW #229

    This week, In the first segment, we welcome Nathan Hunstad, Principal Security Engineer & Researcher, at Code42, for an interview discussing SIEM and SOAR! Next up, In the Enterprise Security News: Secure and monitor AWS Lamba with new, not related, features from Datadog and Imperva, ServiceNow integrates with Microsoft solutions, SentinelOne wins two awards, Reducing risk with IAM, Kemp lanches Zero Trust, AWS launches another contianer product, Zscaler acquires Smokescreen, Sumo Logic acquires DF Labs, Uptycs, Salt Security and Spec Trust secure funding... and more! Then we close out the show with two pre-recorded RSAC 2021 interviews featuring Drew Rose, from Living Security, & Ganesh Pai of Uptycs!

     

    Show Notes: https://securityweekly.com/esw229

    Segment Resources:

    https://www.code42.com/blog/is-soar-the-new-siem/

    Visit https://securityweekly.com/code42 to learn more about them!

    Visit https://securityweekly.com/livingsecurity to learn more about them!

    Visit https://securityweekly.com/uptycs to learn more about them!

     

    Visit https://www.securityweekly.com/esw for all the latest episodes!

    Follow us on Twitter: https://www.twitter.com/securityweekly

    Like us on Facebook: https://www.facebook.com/secweekly

    Super Stoked - ESW #172

    Super Stoked - ESW #172

    This week, we talk Enterprise News, to talk about Salt Security API Protection Explained, Thycotic Leads the Way for Cloud-based Privileged Access Management, ZeroFOX launches AI-powered Advanced Email Protection for Google and Microsoft platforms, Elastic Stack 7.6 delivers automated threat analysis and response, and 12,000+ Jenkins servers can be exploited to launch, amplify DDoS attacks! In our second segment, we welcome David Waugh, Chief Revenue Officer at Managed Methods, to discuss how K-12 schools are victims of lateral phishing campaigns! In our final segment, we welcome Jeff Deininger, Principal Sales Engineer for the Cloud at ExtraHop, to discuss How to Secure Cloud Workloads & Reduce Friction with Cloud-Native Network Detection & Response!

     

    Show Notes: https://wiki.securityweekly.com/ESWEpisode172

    Visit https://www.securityweekly.com/esw for all the latest episodes!

     

    Follow us on Twitter: https://www.twitter.com/securityweekly

    Like us on Facebook: https://www.facebook.com/secweekly

    GitHub to Ruby 2.7, CISO Success, & Lessons From Uber - ASW #120

    GitHub to Ruby 2.7, CISO Success, & Lessons From Uber - ASW #120

    A Tale of Escaping a Hardened Docker container, Four More Bugs Patched in Microsoft’s Azure Sphere IoT Platform, Upgrading GitHub to Ruby 2.7, Upgrading GitHub to Ruby 2.7, Redefining What CISO Success Looks Like, and Lessons from Uber: Be crystal clear on the law and your bug bounty policies!

     

    Visit https://www.securityweekly.com/asw for all the latest episodes!

    Show Notes: https://wiki.securityweekly.com/asw120

    Amnesia:33, NSA, IoT, Trickbot, & Tim Mackey - SWN #87

    Amnesia:33, NSA, IoT, Trickbot, & Tim Mackey - SWN #87

    This week, Dr. Doug talks Amnesia:33, the NSA, IoT Laws, Trickbot returns from the dead, & IRS tax ID Pins! Tim Mackey, Principal Security Strategist at Synopsys, joins us for Expert Commentary to discuss the impact of the supreme court taking up the case of how broad the CFAA is and its impact on security research!

     

    This segment is sponsored by Synopsys. Visit https://securityweekly.com/synopsys to learn more about them!

     

    Visit https://www.securityweekly.com/swn for all the latest episodes!

    Show Notes: https://securityweekly.com/swn87

    CNCF Supply Chain, Frag Attacks, Securing Webhooks, & Complexity vs. Security - ASW #151

    CNCF Supply Chain, Frag Attacks, Securing Webhooks, & Complexity vs. Security - ASW #151

    CNCF releases a whitepaper on supply chain security, Frag attacks against WiFi devices, security webhooks, trusting terraform plans, shared credentials and app access, complexity vs. security vs. design.

     

    Visit https://www.securityweekly.com/asw for all the latest episodes!

    Show Notes: https://securityweekly.com/asw151