怎么隐藏页面的查看源代码功能，急！！！

xiyangyang · 2018-01-09T02:47:28Z

一个做设计的学生来问，怎么把网页的源代码给隐藏起来。她的网页上有很多自制的 css,js 代码，以及一些艺术作品，不想别人轻易的拷贝或者下载了。大家有什么办法吗？

代码

隐藏

网页

CSS

171 replies • 2022-02-27 02:54:15 +08:00

1 2

❮

❯

1

baicai0817

Jan 9, 2018

你自己开发一套系统。

2

msg7086

Jan 9, 2018

42

利用服务器渲染功能，把整个网页转换成图片，然后发给用户，这样他们就看不到源代码了。

3

xooass

Jan 9, 2018

2

做不到，能打开你的页面，就一定能下载页面上的所有资源。

所有什么加 JS 屏蔽右键，加嵌套等等的对于有经验的人来说都是掩耳盗铃

4

zakokun

Jan 9, 2018

简单来说就是禁止右键，这样可以防住很多小白了。

真正想彻底禁止几乎不可能

5

1609629379

Jan 9, 2018 via Android

这个很容易，我之前看到过一个网页为了防盗源代码，只要点击鼠标右键，网页立马就会变成一行字，说什么不能右键。

6

xwhxbg

Jan 9, 2018

4

建议 js 用 jsfuck 编译一下，基本上就是[]()+这种造型了，或者用 web assembly，出来是 assembly language 没有 source map 想反编译比较难，不要写 css 了，用 js+canvas 自己实现样式，同样的 js 过一下 jsfuck，或者用 rust 写 assembly。

7

meszyouh

Jan 9, 2018

直接给出一张图片

8

f2f2f

Jan 9, 2018

1

@1609629379 你这个要破解更容易，一个 js 的事

9

x86

Jan 9, 2018

@1609629379 view-source:URL

10

ORZRRR

Jan 9, 2018

13

我笑出了声，你们呢？

11

kidult

Jan 9, 2018

1

直播打开网页给客户看

12

whypool

Jan 9, 2018

服务端渲染成图片；
没其他办法

13

initdrv

Jan 9, 2018

@x86 #9 我也喜欢用这种方式……

14

xiaodongus

Jan 9, 2018

自己做个浏览器，不带查看源码功能。让网站只能通过自己做的浏览器打开。其他浏览器全部屏蔽，完美！

15

zpf124

Jan 9, 2018

4

最初级：禁用右键，初级菜鸟就能见到防一下。

高级：uglify，把 css 和 js 都混淆了(其实就对 js 意义大点)，让人看着和修改费劲。

宁死不从：用 flash 渲染数据或者后台渲染数据前台就收<img src="内容.jpg">, 再或者 assembly (这个要求浏览器版本得比较新)

16

cnwtex

Jan 9, 2018

http://mojibian.cn/test/

@f2f2f 查看源文件

17

learnshare

Jan 9, 2018

没必要，核心功能和数据在服务端做好防护就行了

18

bzw875

Jan 9, 2018

彻底隐藏做不了，可以混淆压缩 css 和 javascript 啊，增加一点难度

19

dtysky

Jan 9, 2018

@xwhxbg 这两个都是可以逆向的，只是相对安全点罢了

20

xwhxbg

Jan 9, 2018

@dtysky 没有 source map 逆向比较麻烦，前端嘛，做到这样也能防 90%的人了

21

moxiaonai

Jan 9, 2018

gulp 压缩一下

22

moxiaonai

Jan 9, 2018

还可以屏蔽页面右键，屏蔽 f12，可以让大部分人看不到，但是解决不了根本问题

23

tabris17

Jan 9, 2018

webassembly

24

pkaq

Jan 9, 2018

10

有时候你以为重要的东西其实并没有那么重要
这原本就不是一个技术问题
作为老师何不去解开此生心结；）

25

mokeyjay

Jan 9, 2018

1

只能是服务端渲染为图片，不然抓包 GG

26

dangyuluo

Jan 9, 2018

Https，再加个壳？

27

imn1

Jan 9, 2018

防不防 wget 呢？

28

taojing10

Jan 9, 2018 via Android

教你……拍成视频，然后放上去就行了…或者十年前大家 flash 写过网页，你可以复古一下

29

misaka19000

Jan 9, 2018 via Android

@xiaodongus 没用的抓个包就能看到了

30

carlclone

Jan 9, 2018

@ORZRRR 我笑了但是没有出声,因为在上班

31

rocksolid

Jan 9, 2018

1

说句实话,设计重要的是创意,别人都能看到了,就算没代码,写一个很困难么?

32

alex321

Jan 9, 2018

你的东西很重要么。。。这年头天外有天人外有人。花大力气做的东西，可能自己认为很重要；在别人眼里，很可能都不入眼。
老师应该更清楚这种问题吧。

33

Mutoo

Jan 9, 2018

3

正确的方法难道不是加水印加版权申明吗

34

image72

Jan 9, 2018

如果熟悉 react 相关开发，可以直接使用 react-native 相关技术。
mobile app 就直接 react-native,
PC 使用 react-native-macos，react-native-windows
轻松加愉快

35

bumz

Jan 9, 2018 via iPhone

那就把网页替换成截图呗

36

skyfore

Jan 9, 2018

@xiaodongus electron ?

37

f2f2f

Jan 9, 2018

@cnwtex
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
<title>测试页面</title>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script>
Function("‍‌‌‍‍‍‍‌‍‌‌‍‌‌‍‍‍‌‌‍‍‌‍‌‍‌‌‌‍‍‌‍‍‌‌‌‍‌‍‍‍‍‌‍‌‍‍‍‍‍‌‍‍‍‌‍‍‌‍‌‌‌‍‍‍‌‌‌‍‌‍‌‍‍‌‌‍‌‌‍‍‍‌‌‍‍‌‍‍‍‌‌‍‍‍‌‍‍‌‌‍‍‍‌‍‌‍‌‌‌‍‍‍‌‌‌‍‌‍‌‍‍‌‌‍‌‌‍‍‍‌‌‍‌‌‍‍‍‌‌‍‍‌‍‍‌‌‍‍‌‌‍‍‌‍‌‌‌‍‍‍‌‌‌‍‌‍‌‍‍‌‌‍‌‍‍‍‌‌‍‍‌‌‍‍‍‌‌‍‌‌‍‍‍‌‌‍‍‍‍‍‌‍‌‌‌‍‍‍‌‌‌‍‌‍‌‍‍‌‌‍‌‌‌‍‍‌‌‍‍‌‍‍‍‌‌‍‍‌‌‍‍‌‌‌‍‍‍‍‌‍‌‌‌‍‍‍‌‌‌‍‌‍‌‍‍‌‌‍‌‌‌‍‍‌‌‍‍‌‍‍‍‌‌‍‍‌‌‍‍‌‌‌‍‍‍‍‍‌‍‍‍‌‍‍‍‌‍‌‍‍‌‍‍‌‌‌‍‌‌".replace(/.{8}/g,function(u){return String.fromCharCode(parseInt(u.replace(/\u200c/g,1).replace(/\u200d/g,0),2))}))();
</script>
</body>
</html>

38

yulitian888

Jan 9, 2018

楼主想多了，这个防不住的
稍微有点经验的前端开发人员看几眼，就能仿制出来一个大体差不多的东西，保护原始代码的价值何在？

39

jisibencom

Jan 9, 2018

@f2f2f 这个看起来很高级的样子，怎么解？

40

Tink

PRO

Jan 9, 2018 via iPhone

服务器渲染

41

JohnChiu

Jan 9, 2018

@1609629379 禁用 js 不久破解了嘛，前端根本防不住的。。。毕竟是由浏览器解释的超文本标记语言

42

vjnjc

Jan 9, 2018

二楼方法不错，服务器调用 chrome api 生成网页截图发给客户端~

43

gongcheng121

Jan 9, 2018

只要能看到，就能复制

44

SakuraKuma

Jan 9, 2018

大家只能让你死心.

45

bzzhou

Jan 9, 2018

楼主想多了

46

hjdtl

Jan 9, 2018

用 electron 吧

47

xd314697475

Jan 9, 2018

1

普通级
1.禁用右键

专业级
2.css ，js 代码压缩混淆

专家级
3.直接截图展示或者远程桌面

48

shiny

PRO

Jan 9, 2018

1

不如给学生普及下知识产权保护相关的措施和办法。这不是一个技术问题。

49

uuair

Jan 9, 2018

还有一个办法，这是我在 v2 上听说的，就是在写代码的时候，要写很多无意义的代码，函数名称也要用那些无意义的，看起来很正规，很有用的名字，能用 100 行写就不用 1 行，这样基本上看得懂的人，因为看不懂源码的意思，而放弃。。

50

jason19659

Jan 9, 2018

很简单啊，不要用自己的 css，不要放自己的作品别人就下载不到了

51

shiroming

Jan 9, 2018 via Android

大家都那么忙，哪有闲工夫看你的代码

52

fulvaz

Jan 9, 2018

放弃吧.. 就算用图片或者视频, 菜鸡如我都能花一周抄了

53

trn4

Jan 9, 2018 via iPhone

1

54

laoyur

Jan 9, 2018

@1609629379 #5
> 这个很容易，我之前看到过一个网页为了防盗源代码，只要点击鼠标右键，网页立马就会变成一行字，说什么不能右键。

@zpf124 #15
> 最初级：禁用右键

@xd314697475 #47
> 普通级
> 1.禁用右键

----------
噗，心疼 1609629379 一秒

55

Light3

Jan 9, 2018

我觉得只有贴图片可以..
禁止右键防小白而已..
你写乱七八糟的命名也只是减缓看代码的时间没啥实质性的用处..

还有代码这种东西真的有保护的必要吗..
就如 24 楼所说的..

56

lulinux

Jan 9, 2018

首先我想说的是支持楼主的做法。真要防止侵权的话，建议找专业的公司，利用大数据，一逮一个准。到时候抄袭侵权者就像老鼠怕了猫一样乖溜溜的。

57

panda1001

Jan 9, 2018 via Android

1

做设计应该是的瞄上一眼就能复现，根本没必要在乎代码的实现方式

参考知乎
[做出这类 UI 插画需要掌握多少知识 /技能？]
https://www.zhihu.com/question/263980848/answer/288745639

58

pabupa

Jan 9, 2018

@msg7086 厉害了~

59

overflowHidden

Jan 9, 2018

全用图片只适用于纯展示吧，万一有个 css3 动画咋办。js 混淆倒是行，css 防了也没用，有经验的都能仿出来。禁用右键也是白瞎，火狐上有一键下载网页源代码的工具。。。浏览器向来是防君子不防小人，不要想得太强大了

60

rootsir

Jan 9, 2018

@xiaodongus 不顶用，可以抓包，直接看内容

61

liuminghao233

Jan 9, 2018 via iPhone

自己做 app
写个协议用 socket 传顺便加密一下

楼上那些说用 https 什么禁止右键的
这种方法只对他们自己有效

62

thrall

Jan 9, 2018

4

那么多开源的 design 不用，去看一个学生的设计？
自以为有价值罢了

63

A3m0n

Jan 9, 2018

我巴不得别人来看我的代码。

64

silencefent

Jan 9, 2018

想太多，不做 seo，robot.txt 禁止抓取，没人看得到你的网站
实在不行，展示在 tor 网络，记不住地址+不被收录
意义何在

65

hxsf

Jan 9, 2018

@cnwtex #16 最后一个() 改成 .toString() 试试

66

Funian

Jan 9, 2018

防不胜防

67

UnPace

Jan 9, 2018

屏蔽 F12

68

hxsf

Jan 9, 2018

说转图片的，请问 js 交互呢？不要交互，直接截图不就完了，还毛个服务器渲染。。。
说禁用右键的。。。。。。不说啥了
说用别的东西重新写的，考虑过成本么。。。

建议：
1. 开导下他，没有保证无法被逆向的技术。
2. 创意是最有价值的，也是最没有价值的。

> 她的网页上有很多自制的 css,js 代码
加 License，做点加密和混淆工作，增加点逆向难度。（永远无法保证被逆向）

> 以及一些艺术作品
加水印，加 License。