前端页面是如何禁止被查看源码、被下载，被爬取

1.了解禁止查看，爬取原理

1.1.JS代码，屏蔽屏蔽键盘和鼠标右键

document.onkeydown = function() {
	var e = window.event || arguments[0];
	if (e.keyCode == 123) {
		alert('禁止F12');
		return false;
	} else if ((e.ctrlKey) && (e.shiftKey) && (e.keyCode == 73)) {
		alert('禁止Ctrl+Shift+I');
		return false;
	} else if ((e.ctrlKey) && (e.keyCode == 85)) {
		alert('禁止Ctrl+u');
		return false;
	} else if ((e.ctrlKey) && (e.keyCode == 83)) {
		alert('禁止Ctrl+s');
		return false;
	}
}
// 屏蔽鼠标右键
document.oncontextmenu = function() {
	alert('禁止右键');
	return false;
}
上述代码用下面的包裹起来之后， 不显示提示信息：
window.onload = function() {
	// 代码
}
另一段JS代码， 可以阻止浏览器开发工具正常使用：
	((function() {
		var callbacks = [],
			timeLimit = 50,
			open = false;
		setInterval(loop, 1);
		return {
			addListener: function(fn) {
				callbacks.push(fn);
			},
			cancleListenr: function(fn) {
				callbacks = callbacks.filter(function(v) {
					return v !== fn;
				});
			}
		}
		function loop() {
			var startTime = new Date();
			debugger;
			if (new Date() - startTime > timeLimit) {
				if (!open) {
					callbacks.forEach(function(fn) {
						fn.call(null);
					});
				}
				open = true;
				window.stop();
				alert('禁止查看');
				window.location.reload();
			} else {
				open = false;
			}
		}
	})())
	.addListener(function() {
		window.location.reload();
	});

解开方法：打开chrome设置，选择隐私设置和安全性，打开下面网站设置，找到内容下面的JavaScript，把允许改为禁止

1.2.查看源码时，通过JS控制浏览器窗口变化

解开方法：打开chrome设置，选择隐私设置和安全性，打开下面网站设置，找到内容下面的JavaScript，把允许改为禁止

2.百度文库是如何防止抓包

• HTTPS加密通信：
  百度文库可能使用HTTPS协议来加密客户端与服务器之间的通信。HTTPS在HTTP的基础上增加了SSL/TLS协议层，能够对传输的数据进行加密和解密，从而保护数据的机密性和完整性。这样，即使数据包被捕获，攻击者也无法直接读取其中的内容。
• SSL证书校验：
  在使用HTTPS时，百度文库会要求客户端验证服务器的SSL证书。只有当证书有效且由受信任的证书颁发机构签发时，客户端才会建立安全的连接。这可以防止中间人攻击和伪造服务器身份。
• 防爬虫机制：
  百度文库可能通过一系列技术手段来识别和阻止爬虫。例如，通过检查HTTP请求头中的User-Agent字段来识别是否为爬虫请求；设置robots.txt文件来指示搜索引擎哪些页面可以爬取，哪些不可以；以及通过动态加载内容、增加验证码等方式增加爬虫的难度。
• 流量分析和监控：
  百度文库可能会对其网络流量进行实时监控和分析，以识别异常的访问模式和潜在的爬虫活动。一旦发现可疑请求，可以立即采取措施进行拦截和封禁。
• 内容分发网络（CDN）防护：
  使用CDN不仅可以提高网站的访问速度和稳定性，还可以提供一定的安全防护功能。CDN可以缓存网站的静态资源，并通过边缘节点对请求进行过滤和转发，从而减轻源站的压力并降低被直接攻击的风险。

2.1.HTPPS

加密传输数据
HTTPS在HTTP的基础上引入了SSL/TLS协议，对传输的数据进行加密。这意味着，当客户端（如浏览器）与服务器（如百度文库）进行通信时，所有传输的数据都会被加密，只有拥有相应私钥的接收方才能解密。因此，即使数据包被捕获，攻击者也无法直接读取其中的内容，从而防止了数据的非法获取。

2.2. 动态加载

为什么看不到？

• 异步加载：动态内容可能是在页面加载完毕后，通过AJAX（Asynchronous JavaScript and XML）请求或其他网络请求技术异步加载的。这意味着，当您初次查看页面源码时，这些内容可能还没有被加载到DOM中。
• JavaScript动态生成：有时，页面上的内容完全是通过JavaScript动态生成的，而不是直接从服务器接收的HTML。这些内容在查看页面源码时同样不可见。
  动态导入，动态创建元素,使用框架或库的特性（如React、Vue、Angular等）
  React：使用React.lazy和Suspense组件来实现组件的懒加载。
  Vue：使用异步组件和Webpack的代码分割功能来实现按需加载。
  Angular：使用Angular的路由懒加载功能来分割应用并延迟加载模块。

// 动态导入
button.onclick = e => import('./path/to/your/module.js')  
  .then(module => {  
    // 使用module中的导出  
    const myFunction = module.default;  
    myFunction();  
  })  
  .catch(err => {  
    // 处理错误  
  });
// 动态创建元素
// 动态加载JavaScript  
const script = document.createElement('script');  
script.src = 'path/to/your/script.js';  
document.head.appendChild(script);  
  
// 动态加载CSS  
const link = document.createElement('link');  
link.rel = 'stylesheet';  
link.href = 'path/to/your/styles.css';  
document.head.appendChild(link);  
  
// 动态加载图片  
const img = document.createElement('img');  
img.src = 'path/to/your/image.jpg';  
document.body.appendChild(img);

如何查看动态加载的内容？

虽然直接查看页面源码可能看不到动态加载的内容，但您可以使用浏览器的开发者工具来观察和调试这些动态内容：

• 使用开发者工具中的“Network”标签：查看网络请求，找到那些动态加载内容的请求，并查看它们的响应内容。这可以帮助您了解哪些内容是通过动态请求加载的。
• 使用“Elements”或“DOM”标签：在开发者工具中，您可以看到实时的DOM结构。即使内容是动态加载的，一旦它被添加到DOM中，您就可以在这里看到它。
• 断点调试：在JavaScript代码中设置断点，当页面执行到这些断点时，您可以暂停执行并检查当前的DOM状态，以及JavaScript变量的值。
• 使用控制台（Console）：在控制台中，您可以执行JavaScript代码来动态查询或修改DOM。这对于检查和调试动态加载的内容特别有用。

总之，虽然直接查看页面源码可能无法看到所有动态加载的内容，但通过使用浏览器的开发者工具，您可以有效地观察和调试这些动态内容。