iframe嵌入https://sl.se/sv/页面失效，求替代实现方案

Got it, let’s tackle this. That blank iframe is almost definitely because sl.se updated their security settings to block external embedding—most likely by adding an X-Frame-Options header (like DENY or SAMEORIGIN) or a strict Content Security Policy (CSP) that prevents their site from being framed on domains they don’t trust. Since you didn’t change anything on your end, this is 100% a server-side change from their side.

Here are the most reliable alternatives to get similar functionality:

1. Server-Side Proxy (Best for Full Page Embedding) #

The only way to get around frame-blocking headers is to fetch the content from your own server first, then serve it to your frontend. This works because the request comes from your server (not the user’s browser), so the target site’s anti-framing rules don’t apply.

Here’s a quick example using Node.js/Express to build a simple proxy:

const express = require('express');
const fetch = require('node-fetch');
const app = express();

// Proxy route for sl.se content
app.get('/sl-proxy', async (req, res) => {
  try {
    // Fetch the target page
    const slResponse = await fetch('https://sl.se/sv/');
    const rawHtml = await slResponse.text();

    // Fix relative links (images, CSS, JS) so they load correctly
    const fixedHtml = rawHtml
      .replace(/src="\//g, 'src="https://sl.se/')
      .replace(/href="\//g, 'href="https://sl.se/')
      .replace(/src='\//g, 'src=\'https://sl.se/')
      .replace(/href='\//g, 'href=\'https://sl.se/');

    res.send(fixedHtml);
  } catch (error) {
    res.status(500).send('Failed to load SL content');
  }
});

app.listen(3000, () => console.log('Proxy server running on http://localhost:3000'));

Once this proxy is running, you can either:

• Load the proxy URL directly in an iframe (since it’s your own domain, no framing blocks)
• Fetch the content via JavaScript and inject it into a div on your page:

fetch('/sl-proxy')
  .then(res => res.text())
  .then(html => {
    document.getElementById('sl-container').innerHTML = html;
  });

2. Use the Target Site’s Public API (If Available) #

If sl.se offers a public API for the content you need (like real-time transit info), this is the cleanest and most compliant option. Instead of embedding their entire page, you can pull the data via API and render it using your own UI. This avoids any legal or technical issues with scraping/framing, and gives you full control over the design.

3. Server-Side Rendering (SSR) Integration #

If your project uses an SSR framework (Next.js, Nuxt.js, etc.), you can fetch the target page content directly in your server-side component and render it inline. The logic is identical to the proxy method, but integrated into your existing app’s workflow—no separate proxy server needed.

Important Notes: #

• Check Terms of Service: Make sure sl.se allows scraping or proxying their content. Many sites prohibit this in their terms, so review those first to avoid legal issues.
• Add Caching: To avoid hitting sl.se’s server too frequently (and slow down your own site), add caching to your proxy/SSR logic (e.g., using Redis or in-memory caching).
• Handle Dynamic Content: If sl.se uses client-side JavaScript to load content, your proxy might only get the initial HTML. You’d need to use a headless browser (like Puppeteer) to render the full page before serving it, which adds complexity but works for dynamic sites.

内容的提问来源于stack exchange，提问作者Tobaunta Torkelsson