Skip to content

Commit 17cf45a

Browse files
lzwjavalzwjava
committed
docs(notes): add guide for Clash VPN mixed content errors
1 parent 659c15b commit 17cf45a

File tree

3 files changed

+312
-0
lines changed

3 files changed

+312
-0
lines changed

‎notes/2025-06-29-clash-mixed-content-en.md

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
---
2+
title: "Fix Clash VPN Mixed Content Errors"
3+
lang: en
4+
layout: post
5+
audio: false
6+
translated: false
7+
generated: true
8+
---
9+
10+
The error messages you're encountering indicate a **mixed content** issue with the Clash VPN application, specifically when the page at `https://clash.razord.top/` tries to load resources from an insecure `http://127.0.0.1:9090/` endpoint (e.g., `http://127.0.0.1:9090/version`). Modern browsers block such requests because they violate security policies by attempting to load insecure HTTP content on a secure HTTPS page. Additionally, there are CORS (Cross-Origin Resource Sharing) errors due to access control restrictions. Below is a step-by-step guide to resolve this issue.
11+
12+
---
13+
14+
### Why This Happens
15+
- **Mixed Content Error**: The webpage is served over HTTPS, but it’s attempting to fetch resources (like the version check) from `http://127.0.0.1:9090`, which is insecure. Browsers block these requests to prevent potential security vulnerabilities, such as man-in-the-middle attacks.
16+
- **CORS Error**: The browser is blocking the request to `http://127.0.0.1:9090` due to CORS policy, which restricts cross-origin requests unless explicitly allowed by the server.
17+
- **Clash Context**: Clash (or Clash for Windows) is a proxy application that likely uses a local server (`127.0.0.1:9090`) for its dashboard or API. If this local server doesn’t support HTTPS or isn’t configured correctly, it triggers these errors when accessed via an HTTPS webpage.
18+
19+
---
20+
21+
### Steps to Fix the Issue
22+
23+
#### 1. **Verify Clash Core Configuration**
24+
- **Check if Clash Core is Running**: Ensure the Clash core (the backend service) is running on your machine and listening on `127.0.0.1:9090`. You can verify this by:
25+
- Opening a terminal or command prompt.
26+
- Running `curl http://127.0.0.1:9090/version` to check if the endpoint responds with the Clash version.
27+
- If it doesn’t respond, ensure the Clash service is active. Restart Clash for Windows or the Clash core process.
28+
- **Enable HTTPS for Clash Core** (if possible):
29+
- Some versions of Clash (e.g., Clash Premium or Clash Meta) support HTTPS for the local API. Check the Clash documentation or configuration file (usually `config.yaml`) for an option to enable HTTPS for the external controller (the API endpoint).
30+
- Look for a setting like `external-controller` or `external-ui` in the configuration file. For example:
31+
```yaml
32+
external-controller: 127.0.0.1:9090
33+
external-ui: <path-to-ui>
34+
```
35+
If HTTPS is supported, you may need to configure a certificate for the local server. This is advanced and may require generating a self-signed certificate (see step 4 below).
36+
37+
#### 2. **Access the Dashboard via HTTP (Temporary Workaround)**
38+
- If the Clash dashboard can be accessed via HTTP (e.g., `http://clash.razord.top/` instead of HTTPS), try loading it without HTTPS to avoid mixed content issues:
39+
- Open your browser and navigate to `http://clash.razord.top/`.
40+
- Note: This is not recommended for production use, as HTTP is insecure. Use this only for testing or if the dashboard is only accessed locally.
41+
- If the dashboard requires HTTPS, proceed to the next steps to address the root cause.
42+
43+
#### 3. **Update URLs to HTTPS**
44+
- The error suggests the Clash dashboard is trying to fetch resources from `http://127.0.0.1:9090`. If you have access to the Clash dashboard’s source code or configuration:
45+
- Check the frontend code (e.g., `index-5e90ca00.js` or `vendor-827b5617.js`) for hardcoded `http://127.0.0.1:9090` references.
46+
- Update these to `https://127.0.0.1:9090` if the Clash core supports HTTPS, or use a relative URL (e.g., `/version`) to let the browser use the same protocol as the page.
47+
- If you don’t have access to the source code, you may need to configure a reverse proxy (see step 4).
48+
49+
#### 4. **Set Up a Reverse Proxy with HTTPS**
50+
- To resolve the mixed content issue, you can set up a reverse proxy (e.g., using Nginx or Caddy) to serve the Clash core API (`http://127.0.0.1:9090`) over HTTPS. This allows the dashboard to communicate with the core securely.
51+
- **Steps for Nginx**:
52+
1. Install Nginx on your system (if not already installed).
53+
2. Generate a self-signed SSL certificate for `127.0.0.1`:
54+
```bash
55+
openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout localhost.key -out localhost.crt -subj "/CN=localhost"
56+
```
57+
3. Configure Nginx to proxy requests to `http://127.0.0.1:9090` over HTTPS. Create a configuration file (e.g., `/etc/nginx/sites-available/clash`):
58+
```nginx
59+
server {
60+
listen 443 ssl;
61+
server_name localhost;
62+
63+
ssl_certificate /path/to/localhost.crt;
64+
ssl_certificate_key /path/to/localhost.key;
65+
66+
location / {
67+
proxy_pass http://127.0.0.1:9090;
68+
proxy_set_header Host $host;
69+
proxy_set_header X-Real-IP $remote_addr;
70+
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
71+
proxy_set_header X-Forwarded-Proto $scheme;
72+
}
73+
}
74+
```
75+
4. Enable the configuration and restart Nginx:
76+
```bash
77+
sudo ln -s /etc/nginx/sites-available/clash /etc/nginx/sites-enabled/
78+
sudo nginx -t
79+
sudo systemctl restart nginx
80+
```
81+
5. Update the Clash dashboard to use `https://localhost:443` instead of `http://127.0.0.1:9090` for API requests.
82+
6. In your browser, accept the self-signed certificate when prompted.
83+
84+
- **Alternative with Caddy**: Caddy is simpler to configure and automatically handles HTTPS:
85+
1. Install Caddy.
86+
2. Create a `Caddyfile`:
87+
```caddy
88+
localhost:443 {
89+
reverse_proxy http://127.0.0.1:9090
90+
}
91+
```
92+
3. Run Caddy: `caddy run`.
93+
4. Update the Clash dashboard to use `https://localhost:443`.
94+
95+
#### 5. **Bypass CORS Restrictions (Advanced)**
96+
- The CORS error (`XMLHttpRequest cannot load http://127.0.0.1:9090/version due to access control checks`) indicates the Clash core server isn’t sending the appropriate CORS headers. If you control the Clash core:
97+
- Modify the Clash core configuration to include CORS headers, such as:
98+
```yaml
99+
external-controller: 127.0.0.1:9090
100+
allow-cors: true
101+
```
102+
(Check the Clash documentation for the exact syntax, as this depends on the Clash version.)
103+
- Alternatively, the reverse proxy setup in step 4 can handle CORS by adding headers like:
104+
```nginx
105+
add_header Access-Control-Allow-Origin "https://clash.razord.top";
106+
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
107+
add_header Access-Control-Allow-Headers "*";
108+
```
109+
- If you don’t control the core, you can use a browser extension to temporarily bypass CORS (e.g., “CORS Unblock” for Chrome), but this is not recommended for security reasons.
110+
111+
#### 6. **Update Clash or Switch to a Compatible Version**
112+
- Ensure you’re using the latest version of Clash for Windows or Clash Verge, as older versions may have bugs or lack HTTPS support for the external controller.
113+
- Check the Clash GitHub repository (`github.com/Dreamacro/clash` or `github.com/Fndroid/clash_for_windows_pkg`) for updates or reported issues related to mixed content or CORS.
114+
- Consider switching to **Clash Verge** or **Clash Meta**, which may have better support for HTTPS and modern browser security policies.[](https://clashverge.net/en/tutorial-en/)
115+
116+
#### 7. **Allow Insecure Content in Browser (Not Recommended)**
117+
- As a last resort, you can allow insecure content in your browser for `https://clash.razord.top/`:
118+
- **Chrome**:
119+
1. Click the lock icon in the address bar.
120+
2. Go to “Site settings” > “Insecure content” > Set to “Allow.”
121+
- **Firefox**:
122+
1. Click the lock icon and go to “Connection settings.”
123+
2. Disable “Block dangerous and deceptive content” temporarily.
124+
- **Warning**: This bypasses security protections and should only be used for local testing on trusted networks.
125+
- Alternatively, launch Chrome with the `--disable-web-security` flag (for development only):
126+
```bash
127+
google-chrome --disable-web-security --user-data-dir="/tmp/chrome_dev"
128+
```
129+
130+
#### 8. **Check for Conflicting Extensions or Firewall**
131+
- Browser extensions (e.g., ad blockers, privacy tools) or firewall settings may interfere with Clash’s local server. Temporarily disable extensions or check your firewall to ensure `127.0.0.1:9090` is accessible.[](https://vpncentral.com/reddit-blocked-by-network-security/)
132+
- On Windows, ensure the Clash app has firewall permissions:
133+
- Go to Settings > Network & Internet > Windows Firewall > Allow an app through firewall.
134+
- Add or enable Clash for Windows.
135+
136+
#### 9. **Contact Clash Support or Community**
137+
- If the above steps don’t resolve the issue, report the problem on the Clash for Windows GitHub issues page (`github.com/Fndroid/clash_for_windows_pkg/issues`) or the Clash community forums. Provide details about your setup, including:
138+
- Clash version.
139+
- Operating system.
140+
- Configuration file (redact sensitive info).
141+
- Browser and version.
142+
- Check for similar issues in the community, as this error may be specific to certain Clash versions or configurations.[](https://superuser.com/questions/1769163/could-not-switch-to-this-profile-proxy-0-filed-ws-opts-headershost-invalid-c)
143+
144+
---
145+
146+
### Recommended Approach
147+
The most secure and robust solution is to **set up a reverse proxy with HTTPS** (step 4) to ensure all requests are served over HTTPS, resolving both the mixed content and CORS issues. If you’re unable to modify the Clash core or dashboard, using a newer version of Clash (e.g., Clash Verge) or accessing the dashboard via HTTP temporarily (step 2) may be quicker workarounds.
148+
149+
---
150+
151+
### Additional Notes
152+
- If you’re using a custom Clash dashboard or a third-party service like `clash.razord.top`, verify that it’s compatible with your Clash core version.
153+
- Always back up your Clash configuration (`config.yaml`) before making changes.
154+
- If the issue persists, you can try switching to alternative proxy clients like v2rayN or OpenVPN, which may have better HTTPS support for local APIs.[](https://stackoverflow.com/questions/67822697/how-to-route-internet-traffic-via-clash-for-windows-ping-from-python-code-is)
155+
156+
Let me know if you need help with specific steps, such as setting up Nginx or debugging the Clash configuration!

‎notes/2025-06-29-hosting-multiple-pages-en.md

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
---
2+
title: "Host Multiple GitHub Pages with Organizations"
3+
lang: en
4+
layout: post
5+
audio: false
6+
translated: false
7+
generated: true
8+
---
9+
10+
Yes, creating a GitHub organization is a viable way to host additional GitHub Pages sites with unique `*.github.io` subdomains, as each organization can have its own `organization.github.io` site, separate from your personal `username.github.io` site. Here's how you can do it and what you need to know:
11+
12+
### Key Points
13+
- **Personal Account Limitation**: Each GitHub user account can have only one User Site, hosted at `username.github.io`, which is tied to a repository named `username.github.io`. If you've already used this for your personal account, you can't create another `*.github.io` subdomain under the same account.
14+
- **Organization Sites**: Each GitHub organization can also have its own Organization Site, hosted at `organization.github.io`, by creating a repository named `organization.github.io`. This allows you to create additional `*.github.io` subdomains by setting up multiple organizations.
15+
- **Project Sites**: Both user and organization accounts can host multiple Project Sites (e.g., `username.github.io/project` or `organization.github.io/project`) from other repositories, but these are subpaths, not subdomains. If you specifically want distinct subdomains (e.g., `sub.example.github.io`), you cannot achieve this directly with GitHub Pages without a custom domain, as GitHub does not support custom subdomains like `sub.example.github.io` under the `github.io` domain.[](https://github.com/orgs/community/discussions/54144)
16+
17+
### Steps to Create a GitHub Organization for Additional `*.github.io` Subdomains
18+
1. **Create a GitHub Organization**:
19+
- Go to GitHub and sign in with your account.
20+
- Click the "+" icon in the top-right corner and select **New organization**.
21+
- Follow the prompts to set up the organization, choosing a unique name (e.g., `myorg`). This name will determine the subdomain (e.g., `myorg.github.io`).
22+
- Note: Organizations can be created for free, but some features (like private repositories) may require a paid plan, depending on your needs. GitHub Pages for public repositories is available with GitHub Free.[](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site)
23+
24+
2. **Create the Organization's GitHub Pages Repository**:
25+
- In the new organization, create a repository named exactly `myorg.github.io` (replace `myorg` with your organization’s name).
26+
- This repository will host the Organization Site, accessible at `https://myorg.github.io`.
27+
28+
3. **Set Up GitHub Pages**:
29+
- Go to the `myorg.github.io` repository’s **Settings** tab.
30+
- Scroll to the **Pages** section.
31+
- Under **Source**, select the branch you want to publish (e.g., `main` or `gh-pages`) and save.
32+
- Once configured, the site will be live at `https://myorg.github.io` after a few minutes.[](https://dev.to/mohammedasker/how-to-get-github-subdomain-with-github-pages-4g0p)
33+
34+
4. **Add Content**:
35+
- Add an `index.html` file or use a static site generator like Jekyll to the repository’s publishing branch.
36+
- Commit and push your changes. For example:
37+
```bash
38+
git clone https://github.com/myorg/myorg.github.io
39+
cd myorg.github.io
40+
echo "Hello World" > index.html
41+
git add --all
42+
git commit -m "Initial commit"
43+
git push origin main
44+
```
45+
- Visit `https://myorg.github.io` to verify the site is live.[](https://dev.to/mohammedasker/how-to-get-github-subdomain-with-github-pages-4g0p)
46+
47+
5. **Repeat for Additional Subdomains**:
48+
- Create additional organizations (e.g., `myorg2`, `myorg3`) and repeat the process to get `myorg2.github.io`, `myorg3.github.io`, etc.
49+
- Each organization can have one `*.github.io` subdomain, allowing you to create as many subdomains as you have organizations.
50+
51+
### Limitations and Considerations
52+
- **Custom Subdomains on `github.io`**: You cannot create subdomains like `sub.myorg.github.io` directly with GitHub Pages. The `github.io` domain is managed by GitHub, and only `username.github.io` or `organization.github.io` are supported. To use custom subdomains (e.g., `blog.example.com`), you must own a custom domain and configure DNS settings (CNAME records) to point to `myorg.github.io`.[](https://github.com/orgs/community/discussions/54144)[](https://github.com/orgs/community/discussions/64133)
53+
- **Single Repository per Subdomain**: Each `*.github.io` subdomain is tied to a single repository (`username.github.io` or `organization.github.io`). You cannot serve multiple subdomains from a single repository without a custom domain and additional hosting or proxying services.[](https://webmasters.stackexchange.com/questions/144484/separate-subdomains-on-one-github-page)
54+
- **Management Overhead**: Each organization requires separate management (e.g., members, permissions, billing). Ensure you’re comfortable managing multiple organizations.
55+
- **DNS and Custom Domains**: If you want to use a custom domain (e.g., `example.com` or `sub.example.com`) instead of `*.github.io`, you can configure it in the repository’s **Pages** settings and add a CNAME record with your DNS provider. For example, point `sub.example.com` to `myorg.github.io`. Be sure to verify the domain to prevent takeover risks.[](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site)[](https://dev.to/scc33/how-to-host-a-site-with-a-subdomain-on-github-pages-5a1j)
56+
- **Private Repositories**: GitHub Pages for private repositories requires GitHub Pro, Team, or Enterprise plans. If you’re using free plans, ensure your `myorg.github.io` repository is public.[](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site)
57+
58+
### Alternative for Multiple Subdomains
59+
If your goal is to have multiple subdomains (e.g., `blog.example.com`, `shop.example.com`) under a single custom domain, you can:
60+
1. Purchase a custom domain (e.g., `example.com`) from a registrar like Namecheap or GoDaddy.
61+
2. Create multiple repositories in your organization (e.g., `myorg/blog`, `myorg/shop`).
62+
3. Enable GitHub Pages for each repository, setting custom domains like `blog.example.com` and `shop.example.com` in their respective **Pages** settings.
63+
4. Configure CNAME records with your DNS provider to point `blog.example.com` to `myorg.github.io` and `shop.example.com` to `myorg.github.io`. Note that all repositories without their own custom domain will appear under the organization’s custom domain as subpaths (e.g., `example.com/blog`).[](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site)[](https://stackoverflow.com/questions/68505452/github-pages-with-single-custom-subdomain-for-multiple-repositories-using-paths)
64+
5. Be aware that serving multiple subdomains from a single repository is not natively supported by GitHub Pages and may require external services like a CDN or reverse proxy.[](https://webmasters.stackexchange.com/questions/144484/separate-subdomains-on-one-github-page)
65+
66+
### Example Scenario
67+
- You’ve used `username.github.io` for your personal site.
68+
- Create an organization named `myorg` and a repository `myorg.github.io` to get `myorg.github.io`.
69+
- Create another organization named `myorg2` and a repository `myorg2.github.io` to get `myorg2.github.io`.
70+
- For custom subdomains, own `example.com`, and set up `blog.example.com` (pointing to `myorg.github.io`) and `shop.example.com` (pointing to `myorg2.github.io`) via CNAME records.
71+
72+
### Final Notes
73+
- Creating multiple organizations is a straightforward way to get additional `*.github.io` subdomains without needing a custom domain.
74+
- If you want true subdomains (e.g., `sub.myorg.github.io`), you’ll need a custom domain and DNS configuration, as GitHub’s `github.io` doesn’t support this natively.
75+
- Always verify custom domains to avoid security risks like domain takeovers.[](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site)
76+
- DNS changes can take up to 24 hours to propagate.[](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site)
77+
78+
If you have further questions or need help with specific configurations, let me know!

0 commit comments

Comments
 (0)