Copy protect

Question

I'm working on an education project, and want to make impossible to just copy and paste code, so that students have to do it themselves.

What I want to do is to copy protect <pre> <code> </code> </pre> area. Is that possible with jQuery? I mean to block ctrl+c key or something like that.

You cannot stop them. You can discourage the most non-technical by hiding contextual menus, disabling keystrokes, etc, but you cannot stop them from viewing page source or DOM contents. — Michael Berkowski, Aug 13 '12 at 22:06
Even if you block copy/paste function they can just rewrite it... — Setthase, Aug 13 '12 at 22:06
No, that is so absolutely impossible that there is no point even attempting it. You cannot do anything remotely like this that isn't trivial to circumvent. Even if you could achieve it from a technology stand point, they can simply **read the code** and reproduce it. — user229044, Aug 13 '12 at 22:06
Will being clever enough to check View Source qualify for credit? — KRyan, Aug 13 '12 at 22:07
Shouldn't we let you do it yourself? :) What have you tried? — sachleen, Aug 13 '12 at 22:07
http://stackoverflow.com/questions/2903991/how-to-detect-ctrlv-ctrlc-using-javascript — Ram, Aug 13 '12 at 22:07
@meagar I think you didn't understand the question. He wants them to rewrite the code. I believe that's the point of his exercise. Have the student type out the code instead of copy and pasting it. — travis, Aug 13 '12 at 22:14
@travis I understood the question quite well. He wants to do something which is fundamentally antithetical to the Internet. — user229044, Aug 13 '12 at 22:17
"Even if you could achieve it from a technology stand point, they can simply read the code and reproduce it." I believe the point is for them to read the code. Which is why I believe you miss understood the question. — travis, Aug 13 '12 at 22:20
@travis How does making the code into plain text make it harder to read the code? Anything that makes text into *not*-text is going to make it harder to read. Anybody who requires assistive technology to help them use a computer is going to be extremely resentful of whichever solution you come up with. — user229044, Aug 13 '12 at 22:25
There is always the option of a locked down browser if OP has control over the environment. — sachleen, Aug 13 '12 at 22:28
I'm still extremely confused as to why you want to let people read something, but not copy it. Unless you're teaching a typing course, I can't see any benefit. It just seems like you want to force people through the inconvenience of manually retyping a document instead of copy-and-pasting it. Even if you're providing the boilerplate and requiring them to fill in the blanks, you should still allow them to copy-and-paste the code. — user229044, Aug 13 '12 at 22:31
@meagar He's not trying to make harder to read. And I don't believe he ever mentioned he wanted to convert the code to non-text. He simple want to make it so you can not copy and paste the code off the page. It looks like he's trying to develop an educational tool that will take you through the process of writing some code. He will be providing examples and steps to help the student through the process. Instead of the student just coping of he provides he wants the student to type it out for themselves to aid in the education. — travis, Aug 13 '12 at 22:38
@travis This does not aid in the education. It increases the tediousness of the exercise. — user229044, Aug 13 '12 at 22:39
retyping code _does_ aid in the education process. The student has to be careful of their brackets, capitalization, and such. If they just copy/paste they learn nothing of structure, syntax, etc. Also, the more you type code, the more familiar and comfortable you become with it — MrOBrian, Aug 13 '12 at 22:43
That is like saying "Typing English will teach you to speak English". Repetition does not yield comprehension. Nobody ever learned to program by mindlessly typing out code. You learn to program by seeing how the pieces go together, both on a large and small scale. Being able to copy the pieces out of the assignment to a place where you can start actually *playing* with them is vital, it should be as painless as possible. Trying to track down a missing semi-colon in a blob of code you don't understand, but have been forced to manually copy yields resentment, not comprehension. — user229044, Aug 13 '12 at 22:48
If somebody wants to copy a whole function or a few lines or the entire thing to a text file so they can actually compile/run it before they start playing with it, they should absolutely be able to do so. Forcing them to track down syntax errors before they ever get to run the code is a great way to turn somebody off programming. If you really think that making somebody worry about painstakingly *exactly copying code* character by character will make them a better programmer, then we have nothing left to say to each other. — user229044, Aug 13 '12 at 22:52

score 5 · Answer 1 · answered Aug 13 '12 at 22:10

5

Render the code to an image and display that.

answered Aug 13 '12 at 22:10

Mark Bolusmjak

23,606
10
74
129

If the code is big and the student is smart enough then OCR?? – elclanrs Aug 13 '12 at 22:11
Nevermind OCR, if somebody is interested in cheating, what keeps from from just *typing it back out*? You can't let somebody read something in plain text and then somehow erase it from their brains. – user229044 Aug 13 '12 at 22:11
@elclanrs He's just trying to make the students work a bit harder for F sakes. He's not trying to prevent NASA+CIA from screen scraping. – Mark Bolusmjak Aug 13 '12 at 22:11
2

If you're going to -1 an answer, at least explain why it is not useful. +1 – sachleen Aug 13 '12 at 22:12
I didn't downvote but I agree with everybody. Yes this is pointless to us but it probably will prevent a few students from obviously cheating with copy paste just out of laziness. It's like when you find code online that's an image, you just find another source to copy from. – elclanrs Aug 13 '12 at 22:13
I think an image is the best way. If a student is going to go through all the trouble to OCR an image rather than just retype some code, then let them, but at least they can't be lazy and copy/paste – MrOBrian Aug 13 '12 at 22:17
The real question is, why does he think it's better for a student to type out code than to copy and paste it? Is the student who types out a copied answer somehow less guilty than a student who finds a way to copy-and-paste the same? Is it somehow not cheating to type out a copied answer? – user229044 Aug 13 '12 at 22:22
The image solution raises serious accessibility concerns. Also nobody owes you a comment with a downvote. That isn't how voting works. – user229044 Aug 13 '12 at 22:22
@MrOBrian Laziness is a virtue. One of the three *great* virtues in fact. – user229044 Aug 13 '12 at 22:34

score 4 · Accepted Answer · answered Aug 13 '12 at 22:13

4

You could use this CSS to disable selection:

pre {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

It's hard to copy what you can't select.

However, as the comments have mentioned, there are ways around...

Here's a DEMO:

answered Aug 13 '12 at 22:13

Brian Ustas

62,713
3
28
21

The "view source" option makes it trivial to copy even that. – Greg Hewgill Aug 13 '12 at 22:14
right-click, inspect element, uncheck attribute, and text can be selected – MrOBrian Aug 13 '12 at 22:14
Put text around it, select surrounding text, completely covering the `pre` tag and copy. :) Not knocking your answer as there is no foolproof way of doing this, just sharing. – sachleen Aug 13 '12 at 22:15
Top it off by putting a 1px gif covering the text so the user has to Inspect and press Del. – Fabrício Matté Aug 13 '12 at 22:20
The first thing I would try, before firing up the inspector, is to simply view source. Disabling selection with CSS or a transparent gif isn't going to help. This is still the best solution though, as it is the only one in which the text remains *text*. Solutions which turn the text into something fundamentally inaccessible like an image are awful. It's 2012, accessibility is not a new concept. – user229044 Aug 13 '12 at 22:25

score 3 · Answer 3 · answered Aug 13 '12 at 22:29

In combination with other techniques here, you could HTML-encode your content so that "view source" becomes inconvenient to use. For example:

&#x48;&#x65;&#x6c;&#x6c;&#x6f;&#x20;&#x57;&#x6f;&#x72;&#x6c;&#x64;

renders as

Hello World

If your students write a program to decode the hex characters in the HTML-encoded version to plain ASCII, give them extra credit. :)

score 2 · Answer 4 · answered Aug 13 '12 at 22:08

2

Not possible. You could display it inside a Flash movie, or as pre-rendered images sliced up into multiple smaller sections to prevent OCR, but then obvious workaround is to then take a screen capture and OCR that. In other words, it's easier to defeat any security system you put in place than it is to create the system in the first place

The attacker will ALWAYS have the upper hand, because you're handing them the keys to the vault by simply letting them view the protected content.

answered Aug 13 '12 at 22:08

Marc B

356,200
43
426
500

You don't need a flash movie; you just need to put the code in an image. All you have to do is make it more difficult to crack than it is to just do the assignment. – Robert Harvey Aug 13 '12 at 22:10
@robert: image = OCR. it's a pointless game of one-upmanship, and the attackers will always be able to defeat the system faster. – Marc B Aug 13 '12 at 22:14
5

We're not securing a bank here. – Robert Harvey Aug 13 '12 at 22:15
I believe you miss understood his question, hes writing a simple educational tool. He simply wants to discourage copy and pasting the code HE provides to the student. – travis Aug 13 '12 at 22:18

score 0 · Answer 5 · edited Aug 13 '12 at 22:30

Could you insert invisible characters into the HTML code so if one copies it, it would be a pain to remove all those characters that would cause syntax errors but you wouldn't ever notice it unless you copied into a text editor. They would be randomized characters between every actual code character.

Visible code:

function foo()

Actual HTML:

f!u#n%c^t&i*o(n) (f@o$o%(^)&

Where each of the symbols are invisible unicode characters. I don't know how many of those there are but I tried the ZERO WIDTH NO-BREAK SPACE and it seemed to work. It would be an inconvenience. That's the best we can do, inconvenience, there is no foolproof way to stop somebody from copying the code.

To clarify, to anyone reading the page, they see the first line. To somebody who copied the text into a text editor, they'll either see squares or nothing but the code should not compile.

People who depend on assistive technology will hate this solution. — user229044, Aug 13 '12 at 22:26

score 0 · Answer 6 · answered Aug 13 '12 at 22:23

Another option, similar to images, but would take up a lot less space and bandwidth would be to grab draw the code on a canvas (possibly after getting it via ajax). Requires up-to-date browsers, and more programming, but would create clean text that cannot be easily copied.

Copy protect

6 Answers6