笔记软件引用三方网页，为何不会造成跨域呢？

Question

我们知道前端网站1访问网站2的内容，会造成跨域，但是我有时候看到一些笔记软件，比如notion，可以引入一个外部的网站链接，

请问下为何这样的情况就不会造成跨域呢？

Answer 1

1. 你先了解一下，什么是跨域，为什么会跨域，跨域会造成哪些影响
2. 然后了解哪些是跨域，哪些不是跨域
3. 再了解怎么解决跨域问题
4. 最后再看自己的问题

Answer 2

不会是 iframe 之类的东西吧？

也有可能是个爬虫，爬了一些摘要回来，比如你在聊天窗口发送了一个url

Answer 3

引用外部网页的笔记软件通常使用的是 iframe 元素。通过将外部网页嵌入到一个 iframe 中，可以在笔记软件中显示该网页的内容。这种方式不会造成跨域问题的主要原因是，浏览器对于 iframe 的跨域访问有一定的宽容策略。
当然，linong的回答的可能性是存在的，笔记软件引用外部网页的内容是可能与爬虫有关的。众所周知，爬虫是一种自动化程序，用于从互联网上收集信息。如果笔记软件具有爬取网页内容的功能，那么从技术实现上来说的话，它是可以使用爬虫来获取外部网页的摘要或其他相关信息，并将其显示在笔记软件中。

浏览器在加载 iframe 时，并不会按照正常的跨域限制来处理。相反，它会允许 iframe 访问并显示来自其他域的内容，即使这些内容本身属于不同的域也可以。这种宽容策略是出于对用户体验和功能需求的考虑，使得用户可以方便地在笔记软件中引用和查看其他网页的内容。

虽然在笔记软件中引用外部网页时不会产生跨域问题，解决完这个问题之后，我再多补充一句吧，从网络安全上讲，仍然可能存在安全风险。因为该外部网页可能包含恶意代码或不安全的内容，对用户数据和隐私构成威胁。比如说这种：

// 示例：引用外部网页的代码示例

// 获取用户输入的外部网页链接
const externalUrl = getUserInput();

// 创建一个 iframe 元素来加载外部网页
const iframe = document.createElement('iframe');

// 设置 iframe 的 src 属性为外部网页链接
iframe.src = externalUrl;

// 将 iframe 添加到 DOM 中
document.body.appendChild(iframe);

// 监听 iframe 的加载事件
iframe.addEventListener('load', () => {
  // 在 iframe 加载完成后进行安全性检查
  
  // 1. 检查是否存在恶意代码
  const iframeDocument = iframe.contentDocument;
  const scripts = iframeDocument.getElementsByTagName('script');
  
  // 遍历所有的脚本标签，检查是否包含可疑代码
  for (let i = 0; i < scripts.length; i++) {
    if (hasMaliciousCode(scripts[i].textContent)) {
      // 存在恶意代码，采取相应的安全处理措施
      handleMaliciousCode();
      break;
    }
  }
  
  // 2. 检查是否存在隐私泄露问题
  const sensitiveData = iframeDocument.querySelector('.sensitive-data');
  
  // 如果找到了包含敏感数据的元素，则需要采取相应的隐私保护措施
  if (sensitiveData) {
    handlePrivacyConcerns(sensitiveData);
  }
});