How to Install SSL Certificate in XAMPP For Local Development?

How to Install SSL Certificate in XAMPP
  • 5 min. read
  • Jun 27th, 2025
  • Technology

Setting up SSL in XAMPP ensures your local development environment mimics real-world, secure HTTPS deployments. Learning how to install SSL certificate in XAMPP is a key step to building secure web applications in a local environment. This isn’t just a best practice but often a prerequisite for enabling critical functionalities. Without HTTPS, many modern web features such as APIs, service workers, and secure cookies won’t function as intended, even in a local environment. 

With this guide, you’ll set up HTTPS using either OpenSSL or the easier and trusted mkcert utility, ensuring your development mirrors real-world conditions.

Step-by-Step Guide on How to Install SSL Certificate in XAMPP

There are two straightforward ways to get SSL running in your local XAMPP setup, using the built-in OpenSSL utility or the more user-friendly mkcert tool. Both approaches help you simulate a secure environment for development.

Using OpenSSL utility

Step 1: Create a minimal config file

Step 2: Generate the private key and certificate using the minimal config file

Step 3: Configure Apache to use the certificate

Step 4: Review SSL configuration

Step 5: Verify Apache configuration and check for syntax errors

Step 6: Restart Apache

Using mkcert utility (Recommended)

Step 1: Install mkcert by following the instructions here

Step 2: Generate the certificates

Step 3: Configure Apache to use the generated certificates

Step 4: Review and verify Apache configuration

Step 5: Restart Apache

There are a few browser APIs that require the web page to run in a secure context. For that, we need SSL. Here is how we can configure SSL for Apache in XAMPP. There are two ways to configure the SSL - either using openssl or mkcert

Using OpenSSL utility

This method works properly. However, you won’t be able to see the green padlock icon even after following the steps below. This is intended behavior. To get a green padlock without warnings, you need to add your certificate to the trusted root certificate authorities.

Step 1: Create a minimal config file

Create a new file named openssl_minimal.cnf and add the following content:

Create_a_minimal_config_file

Make sure to replace the placeholder variables with actual values

Save this file in a convenient location, such as C:\xampp\apache\conf\openssl_minimal.cnf

Step 2: Generate the private key and certificate using the minimal config file

2.1 Open terminal and navigate to the OpenSSL directory.

apache_bin

 2.2 Generate a private key. The following command will generate a private key name private.key . Feel free to use any name of your choice.

Generate_a_private_key

2.3 Create a Certificate Signing Request (CSR) file using the minimal config file created earlier. The output file name can be customized.

Certificate_Signing_Request_(CSR)_file

2.4 Generate a self-signed certificate file using the minimal config file. The parameters can be customized.

self_signed_certificate_file

Step 3: Configure Apache to use the certificate

3.1 Copy the generated files to a convenient location inside the Apache folder.

Copy_ generated_files

3.2 Open the httpd-ssl.conf file located in xampp\apache\conf\extra and update the paths.

Configure_apache

The paths are relative to the Apache installation folder.

3.3 Ensure that the following lines are un-commented in the httpd.conf file.

httpd.conf_file

Step 4: Review SSL configuration

Review the VirtualHost setup in the SSL configuration file. Here is a sample of what it might look like.

Review_SSL_configuration

Step 5: Verify Apache configuration and check for syntax errors

5.1 Navigate to xampp\apache\bin

apache_bin

5.2 Check for syntax and other configuration errors using the following command

httpd.exe-t

5.3 If everything is correct you would get the message Syntax OK

Step 6: Restart Apache

Use the XAMPP control panel to restart Apache. Now try accessing localhost via HTTPS. The browser might show a warning about the certificate being self-signed. You may ignore the warning and proceed.

Using mkcert utility (Recommended)

mkcert is a tool to make trusted certificates for local development without any configuration.

Step 1: Install mkcert 

To get started with, first install mkcert by following the instructions here.

Once mkcert is set up, run the below command to install the trusted root store.

Install_mkcert

Step 2: Generate the certificates

mkcert_localhost

The above command will generate two files - localhost.pem and localhost-key.pem

Step 3: Configure Apache to use the generated certificates

3.1 Copy the generated files to a convenient location inside the Apache folder.

copy_the_generated_files_Apache_folder

3.2 Update the httpd-ssl.conf file located in C:\xampp\apache\conf\extra

SSLCertificateFile_Apache

Step 4: Review and verify Apache configuration

Review and verify the Apache configuration using the steps mentioned above (Step 4 and Step 5 of OpenSSL installation).

Step 5: Restart Apache

Restart Apache, and you are good to go. When opened in the browser, the green padlock icon will be visible.

Summing It Up

Now you have two reliable methods to set up HTTPS in your local environment: OpenSSL for a manual approach and mkcert for a quicker, trusted solution. Understanding how to install SSL certificate in XAMPP localhost not only helps you avoid browser security warnings but also ensures that your development environment aligns with modern web standards. 

Secure by default is now the new norm, and that applies to local development too, especially for APIs and full-stack work.


Tags

  • Install SSL Certificate
  • XAMPP
  • Local Development
  • Configure SSL

Related Blogs

sundew

Blog

User Experience Design vs Interaction Design Explained: Roles, Goals, and Impact

In the world of digital product design, user experience design vs interaction design is a common debate seen today. While interaction design is all the rage now, and businesses are investing tons in the same, many fail to understand that it’s a subset of the good ol’ UX design, and not an alien concept altogether.While UX design shapes the overall journey a user takes, interaction design focuses on the finer details - how users engage with a product in real-time. As businesses strive to meet rising user expectations, understanding the synergy between UX and interaction design is crucial. Let’s dive into their differences, their roles, and why interaction design is now emerging as a game-changer, paving the way for next-level intuitive digital experiences.Interaction Design vs User Experience Design: What Is the Difference?If you are wondering what the difference is between user experience design and interaction design, the clue lies in the names. UX puts the “U” for "user" front and center. It’s all about how people feel when they interact with a product or service, with empathy being the driving force here. IxD is about interactions, not always involving a person. These could be between a user and a product, sure. But they could also happen between two systems talking to each other. Some great inter-machine uses of interaction design examples include autopilot and onboard navigation in an aircraft. IxD focuses on what happens and how it flows, whether or not a human is involved.While both interaction design (IxD) and user experience (UX) design aim to enhance how users engage with digital products, they operate simultaneously at different levels. Let’s understand each separately for better clarity on the user experience design vs interaction design debate.UX DesignThe user experience (UX) design process is all about shaping how users overall feel and interact with a product. It goes beyond aesthetics, encompassing functionality, usability, and accessibility, ensuring a seamless experience from start to finish. By blending elements like interaction design, information architecture, usability, and human-computer interaction (HCI), UX design aims to make digital products more intuitive, efficient, and enjoyable. Features:Understanding the User: Great UX design starts with a deep understanding of the user’s needs, behaviors, and challenges. Designers rely on user research, personas, and behavioral analysis to create experiences that resonate with the target audience.Data-Driven Design Decisions: Effective UX design relies on qualitative and quantitative research methods. These include usability testing, analytics, and surveys to inform design choices and optimize user interactions.Structuring Information for Clarity: UX designers organize content logically to ensure users can navigate a digital product effortlessly. Through well-planned information architecture, clear navigation systems, and intuitive wireframes, they make interactions smooth and frustration-free.Interaction Design (IxD)Interaction Design is a specialized subset of UX design that focuses specifically on the micro-level dynamic elements of a digital product. It shapes the structure and functionality of UI components like buttons, menus, forms, and transitions, creating intuitive pathways that help users achieve their goals effortlessly. Every click, swipe, hover, or animation is strategically designed to guide user behavior and enhance usability. FeaturesPutting Usability First: IxD bridges the gap between form and function. Every element, from buttons to transitions, is built to support real goals, making tasks feel seamless.Simplicity & Intuitive Navigation: The best interfaces are those that users don’t have to think about. Interaction design simplifies complexity by:Presenting information in a clear, structured wayUsing recognizable patterns and UI elementsRemoving unnecessary friction from the user journeyAdaptability Across Devices: Responsive design ensures a seamless transition across multiple screen sizes and input methods. This offers a consistent and engaging experience whether on desktop, tablet, or mobile apps.Clear & Immediate Feedback: Users need confirmation that their actions are being registered. Interaction design incorporates visual, auditory, or haptic feedback, such as button animations, error messages, or progress indicators. This provides clarity and enhance user confidence.Engaging & Interactive Elements: Well-designed interaction elements ensure that: Buttons and links are easily distinguishableTransitions feel smooth and purposefulEvery action has a clear and meaningful responseHere's a user experience design vs interaction design comparison to highlight their differences:​How Does Interaction Design Elevate UX Design?Both ​Interaction Design (IxD) and User Experience Design (UX Design) are integral components of the digital design landscape, each with distinct roles and focuses. However, looking at their interdependability, it can be safely said they are not mutually exclusive.While IxD takes UX design to new heights, it isn’t unusual to ask, “Is user experience central to interaction design?”It absolutely is!Interaction Design operates within the broader scope of User Experience Design. Simply put, UX defines the experience, while IxD brings it to life through dynamic interactions.By integrating strong interaction design principles into UX design, businesses can create products that don’t just work, but feel effortless and delightful to use.When done right, interaction design ensures that every user action feels natural and fluid, leading to better engagement, higher retention, and an overall improved digital experience.Is Interaction Design the Future of UX?While Interaction Design lives within the broader umbrella of User Experience design, it doesn’t mean they are interchangeable.A seamless product experience requires both. A strong UX without thoughtful interactions can leave users confused. Flawless interactions without a user-centered foundation can lack meaning. And here’s the important part: not every UX designer is skilled in Interaction Design, and not every interaction designer excels at UX.This is why an effective design strategy should involve understanding the distinctions highlighted in this user experience design vs interaction design comparison. These help businesses bring the right mix of talent on board when building teams. This way, they can make sure the products they create not only function right, but also feel right.

Read More
sundew

Blog

Generative AI Security: Compliance Burden or a Strategic Advantage?

For many global enterprises, generative AI security started as a legal concern. Risk and compliance teams were often the first to raise their hands and ask.Can we use this tool?Is our data exposed?What will regulators say?But that conversation is evolving. Fast.In present times, GenAI security is less about passing audits and more about enabling scale. It plays a direct role in how confidently and securely you roll out AI across customer platforms, internal copilots, and decision-support systems. The real question is no longer “Are we compliant?” It is “Are we secure enough to move forward without hesitation?”This blog answers all your doubts and shows how security, governance, and compliance can shift from being a hurdle and become your secret weapon for standing out.Why Traditional Security Doesn't Cut It AnymoreThink about how we've always approached security. Build a perimeter. Control access. Monitor for breaches. It worked when you knew exactly what your systems would do. But Generative AI doesn't work that way.These systems create new content, make recommendations, and directly influence business decisions. A customer service chatbot trained on your knowledge base might inadvertently expose proprietary information. A contract review tool could perpetuate biases from historical data. A marketing assistant could easily draft content that drifts away from brand guidelines or, more concerning, crosses regulatory boundaries without anyone noticing at first.Microsoft's GitHub Copilot demonstrated this challenge in 2023 when research revealed the tool could suggest code snippets containing real credentials and API keys from its training data. Researchers extracted over 2,700 hard-coded credentials, with at least 200 being valid, active secrets. The issue wasn't a breach in the traditional sense. It was just the model behaving exactly as designed, just with unintended consequences.How Generative AI Security Flips Risk into a WinWhen you align AI risk management with your business priorities, vulnerabilities stop being roadblocks and start becoming differentiators. Security, governance, and compliance form an interconnected framework that protects both innovation and trust.Instead of treating security as IT’s compliance burden, leading enterprises are turning it into a competitive edge. Curious how? Let’s look at a few use cases: Banking and Finance Sector: The major concerns of banks and financial institutions are data privacy and security. Isn’t it? And GenAI systems often require access to sensitive financial data, which raises valid concerns under regulations such as GDPR and CCPA. Many organizations view data minimization as a limitation. In reality, it’s a discipline. By restricting models to only essential customer data, masking sensitive fields, and narrowing dataset scope, banks can reduce exposure while maintaining performance and regulatory confidence.The outcome was clear: faster compliance reviews, reduced security exposure, and more predictable model performance. What began as a GDPR-driven adjustment ultimately improved operational efficiency and strengthened client trust during enterprise audits.The Healthcare Industry: Several hospital networks are using GenAI to pre-fill patient intake summaries and assist with clinical documentation. Instead of layering AI governance and compliance later, they defined it upfront. Every interaction is logged. Outputs are traceable. Bias testing runs alongside deployment cycles. Access to patient records is tightly permissioned.What‘s the Payoff?Compliance teams gained visibility. Clinicians gained efficiency. And when partnering with insurers and digital health platforms, documented AI controls strengthened credibility during due diligence reviews.A Supply Chain Example: In 2025–2026, global logistics leaders such as Samsung SDS, DHL, and Walmart have expanded AI monitoring across forecasting and routing systems. Instead of relying on static deployment checks, they strengthened security controls, introducing drift detection, output validation, role-based access restrictions, and real-time anomaly tracking.So, what changed for the businesses? Forecast accuracy became more consistent, even during demand swings. Reduced risk of flawed predictions, data leakage, and unauthorized model interactions. Operations teams were able to identify anomalies earlier, rather than react after delays had already occurred. AI oversight also shifted closer to day-to-day operations. Planning, routing, and inventory decisions were supported by systems leadership could actually trust, which translated into steadier delivery performance and tighter cost control across regions.How Secure AI Deployments Win Enterprise Trust and Become a Growth EnablerEnterprises often ask: Is AI security just about passing audits, or is it about building trust? The truth is, regulators, customers, and partners are all expecting more, and the upside of meeting that expectation extends well beyond simply staying compliant. The two questions that change everything: What are Regulators Really Expecting?Global frameworks, from the EU AI Act to FTC guidance, are pushing for transparency and lifecycle accountability. Waiting until deployment to think about compliance often leads to delays. Embedding regulatory alignment into development keeps scale predictable.Why is Governance Suddenly a Competitive Advantage?  Because your customers are asking harder questions, an IBM Data Breach Report found that 97% of organizations that experienced an AI-related security incident lacked adequate AI access controls. Why does it matter? Because your customers and partners aren't just evaluating your features, they are evaluating your judgment.Strong governance is your SUPERPOWER for building trust.  It’s what distinguishes enterprises that operate with discipline from those simply assuming things will work out.How To Reframe Your AI Security Framework: A Checklist To Gain Market AdvantageCompliance can slow you down, or it can sharpen your edge. The difference lies in how you approach it. Here's your quick compliance checklist to build trust and speed:Think like your customers, not your auditors: Anticipate regulatory shifts and don’t wait for mandates to arrive. Track emerging standards and align early with what your customers will expect in terms of transparency and accountability.Use data discipline to move faster: Limit models to only the data they truly need. Leaner datasets reduce exposure, simplify oversight, and accelerate approvals.Engineer security into day one: Privacy and access controls shouldn’t follow deployment. Build them into architecture and product design so expansion doesn’t trigger rework.Maintain clear documentation: Structured records of model decisions, updates, and controls make audits manageable and reduce friction during reviews.Turn explainability into a selling point: Help your customers understand how your AI reaches conclusions. Clarity builds confidence, and confidence drives adoption.The pattern is clear. Those who lead with this mindset don’t treat enterprise generative AI security as overhead. They use it to strengthen products, credibility, and long-term position.Now It’s Your Turn. Is Your Enterprise Ready?Ask yourself this first: Are you building compliance in from the start, or are you planning to address it after everything else is in place?Most organizations rush to production, then someone from Legal shows up asking about audit trails. Or a customer asks how your Generative AI makes decisions, and nobody has a good answer. So you layer in safeguards, documentation, and controls,  hoping everything holds up under review.That approach slows momentum and increases exposure. So, what’s the right way to do this? Build compliance into the foundation of your enterprise AI strategy and embed privacy controls directly into user workflows. With that structure in place, you will be better positioned to scale responsibly, protect your reputation, and operate with certainty.Connect with our experts to assess where your GenAI initiatives stand and define a secure path forward.

Read More
sundew

Blog

Glass Morphism and liquid design for next-generation UI

Glassmorphism for next-generation UIIf you take a footstep into the world of the latest web design trends, you may already have heard of Glass Morphism. Eye-catching and colourful, this aligned term trend evokes transparency and a multi-layered approach. With its resemblance to the milky glass surfaces, it has drawn a lot of attention.Hello Glass Morphism! There is a new design trend on the block that is gaining popularity rapidly. Vividly coloured backgrounds, seemingly translucent objects, frosted-glass effects, floating-in-space features are the ones that have driven the term ‘Glass Morphism’ which pushes the boundaries of next-generation UI.Glass Morphism is a term used to describe UI design that emphasizes dark or light objects, placed on the top of colourful backgrounds. A background blur is placed on the objects that allow the background to shine through the frosted glass.Elements and Characteristics of Glass Morphism Aesthetics“A Classy design that looks Glassy”- The design represents the picturesque layout of a “series of glass panels floating in the vertical space”. The name absolutely fits the looks and the effect, which is created based on an amalgamation that is made of transparency, vivid background colours, layers, and shadows.TransparencyTransparency is achieved through the frosted-glass effect by making the background blur. This needs to be done to add depth to the design and to establish verticality. The designers also blur the objects to give the layout a sense of perspective as if it appears like they were floating in 3D space.Multi-layered approachWith objects floating in space, the multi-layered interface projects a clean look that is also eye-soothing. This style works best with one or more transparent layers on a colourful and bright backgroundVivid and Colorful backgroundThe background colour plays an important role in highlighting the blurred transparency, which always focuses on being both colourful and subtle. Dull, low-contrast backgrounds would simply fade away under objects and the effect would be lost. It is also noteworthy that subtle, semi-transparent white borders are used as light borders on translucent objects to simulate the glass edge and to make objects stand out from the subtle background.Why has Glass Morphism become the talk of the design agencies? Glass Morphism is a modern UI design trend that’s steadily been gaining popularity in recent years. It is utilized in web and app design and is quickly becoming mainstream. But it isn’t a brand new idea as the style is strongly influenced by similar concepts that have been first introduced by Apple in 2013 with iOS 7. The trend re-emerged in November 2020 when Apple brought back the design effect with the latest update, MAC OS Big Sur.It has since been used by Microsoft and Windows Vista as part of their Fluent design system. If you remember the switch to iOS 7 and Windows Vista, you will recall how refreshing it was to view notifications popping up with blurred items against the background. This effect is known as “The Acrylic” and uses it on app surfaces to add depth and establish a visual hierarchy. The style has developed over the years. It has reinvented itself with modern fonts, shapes, and colours to keep things fresh. Let’s catch a quick glimpse of some of these examples to see why this trend is so popular.How to implement Glass Morphism in Web Design in Easy Steps?Picking the right layersWhile applying this latest trend, designers first need to go through the app mock-up or the website and select the ideal vantage point to reflect the head-turning glassy looks prominently. It is recommended not to overuse it. It looks eye-soothing over light and colourful backgrounds. The Icons over it must be designed tactfully and can be accessed from anywhere without any glitch. Whilst they are becoming more common, we recommend using the layers with great consideration. Implementing Glass-a-like looksGlass Morphism aims to create the illusion of a glass-like panel floating over a background. Setting the right grade for transparency is relatively easy with common design tools such as Figma. Instead of the entire shape, it is only the fill that is made transparent. If this jargon term makes you worried about the technical inefficiency of the designers, then you must not tear your hair thinking that non-technical designers can also comfortably bring on this effect by tweaking your HTML/CSS. To implement a glass morphism effect for your website or application, here is a CSS resource to check for and to Implement it directly. You can try multiple effects and how it is suiting as per the requirements. Adding dimensions to bring on realism in designAdd a fine border to your object and lower its transparency to make it look glass-like to give your design some dimension. A shadow underneath will give you a sense of depth and these are slightly more technical changes that need to be tweaked in your code. If coding isn’t really your forte, you’d like to incorporate this trend into your own web designColour pallets to choose from for a Glass Morphic effectMainly pale colours are used for surfaces. Colours that are close to white and grey with low chroma key. Choosing a soft colour is key to minimalist design in Glass Morphism. Here you can choose a vivid colour with different colour gradients for an anomalous effect. Here are the colour pallets to choose directly from for the background in glass morphism design.What is Liquid Design?The term "liquid" implies the smooth flow of the website into the space it occupies. If you are using a high-resolution monitor, this may mean that you need to resize your browser. If you have a low-resolution monitor, you will still see the information compactly.If you do Liquid Design right, you should be able to make your pages display on almost anything and still make sense to the user. But it’s not just about making a page with the browser window. The Principles of Liquid Design align with the principles of accessibility when you build your site using relative font units and percentage-based widths for common elements. This will make the user interface a lot easier for a portion of your visitors.Website design trends have solved the problem of multiple screen sizes in a few ways. One solution is fluid design and it is becoming more and more popular. Instead of fixed columns and widths, a fluid website is built on relative widths, grids, and percentages. This allows the website to scale up and down fluidly.Liquid Design concept is about making 'Web' a Better Place’The first thing you’ll need to do is to change the way you think about the Web. Throw away the idea of having your pages look exactly the same on every deviceStart thinking about accessibility issues as you designHold your head high as you are on the way to make the net a better place!The liquid design concept is about creating customer-focused communication that’s simple, clear & engaging. This design concept strategically positions the brand to make it stand out from the crowd and gifts it a brand new personality that resonates well with its audience. It delivers a delightful experience to make the customer come over and over again.What's the Difference Between Fluid and Responsive Website Design? You may have heard the term "responsive design" and now you're wondering how it makes a difference when comparing with fluid or liquid design.Responsive sites use media queries to control the design as it scales up or down on the device. They also have breakpoints and set containers, so you have different "breakpoints" for different screen sizes; extra small for mobile and large size for desktop. "A fluid site is responsive, but not all responsive sites are fluid."- Sam McKinneySo, now to be a little more technical with explaining. Many of these websites have very minimal navigation, moving elements on the homepage, and all use the entire width of the page. Seeing is believing! Words do these websites no justice. You have to see them in action to understand the difference and why fluid design is special.Any designer who seeks 100% compatibility should take the time to set up a fluid layout. The main challenge isn’t the excessive white space in large screen resolutions, but rather the small percentage of users with a small screen resolution. For websites with large audiences, it should have a neat and user-friendly design anyway, which can be done effectively with a liquid design layout.

Read More

Thank You!

Excellent!

Successfully subscribed to Sundew Solutions newsletter!

Acknowledged