Disable Copying in my website

Anvil Q&A
1

Sorry for disturbing the staff at Anvil for the third time in a day but I was wondering if it is possible for me to prevent copying text from my website. I’m building a community for writers to share their works so that readers can read them. And if people can easily copy the text, it will be highly risky. Books getting stolen from online platforms is very common.

I tried pasting a transparent png image over the text but it can still be copied by dragging the mouse to copy text from an area.

Any possible solutions?

2

Not Anvil staff, but…

There are various techniques using CSS or Javascript to disable text selection, disable the right-click menu, unbind or catch the keyboard text selection, but these are just deterrents to casual users and can be bypassed. There are also obfuscation techniques to make it harder for people looking at your page source. But short of using DRM, public key encryption, etc. I’m not aware of any absolute way to prevent plain text from being copied from a web resource.

Ken

2 Likes
3

I used a converter tool that converted my Anvil website into an app version. It had the option of disabling selecting text which worked well. Is there a way to imply it to my website as well?

Also, my knowledge of Java and CSS is limited so if you know a way, even if it is not completely foolproof, please tell me.

4

By the way Anvil doesn’t luckily have data lying loosely in their source code. I noticed this flaw in a pretty big community similar to mine.

5

I was also hoping for some way by which I can make my text show up in an image instead(I know that it still isn’t completely safe but it will be the best option for now)

6

There’s a CSS rule that allows you to say the user should not be able to select text in the element:

user-select: none;

That would need put into an Anvil role and then the particular text components assigned that role. There’s information on creating your own roles at: Anvil Docs | Themes and Styling

I don’t know how widely browsers support user-select, so you’d want to test that on a variety of web browsers.

7

If you want to go that route, you could trying (programmatically) writing out the text to a canvas object.

I don’t know if this is feasible performance wise, but you could try it out.

Cheers,
Ken

8

@kcampbell @jshaffstall Thanks for your help

The user select option will work well with Google Chrome and Microsoft Edge. However, browsers like UC browser can easily copy the text.

Although if anyone here is good with HTML and CSS, I’ll like to insert a Transparent PNG upon my entire page. XY panel will totally mess up my formatting for mobile so it will not be my preference. Is there a way to achieve this using HTML so that the transparent PNG will be over my entire website? This will be able to disable copy-pasting.

Also, I don’t know why but canvas is not working for me. I literally just pasted the code from example and yet nothing happened.

c.stroke_style = "#2196F3"
c.line_width = 1
c.fill_style = "#E0E0E0"

c.font = '36px montserrat'

c.fill_text('Fill Text', 100, 100)
9

If it’s just a deterrent you could also combine the user select option with a pseudo ::before

.structure::before { 
/* Or .anvil-role-unselectable::before instead of the whole page */
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 3;
}

Though as @kcampbell points out - someone determined can copy the content.
All they need to do is inspect the html

Re the canvas - make sure you put that code in the canvas show event, or better the canvas reset event.
You can only draw on a canvas when it’s on the screen.

10

I’m confused about that ::before function you mentioned. What does it do?
Also, I tried Canvas but it doesn’t work as efficiently as a label. I didn’t find any option to change text and the they also come in a single line. I don’t think it is suitable for huge amount of text inside it

11

It’s a bit of a hack - you typically use it for elements that are associated with another element.

The way it’s written above effectively creates a transparent layer over the .structure element (in anvil’s case the whole app)
Using it as a role would create a transparent layer over the Anvil Component

https://anvil.works/build#clone:BHDW55VPMPAT25XP=5QQTO3QLMXBOV7MAJO2HIBRE

But it’s not effective for someone determined

12

It worked better. Thanks. Also, do you think adding text to image using PIL will work better than Canvas? I haven’t upgraded my plan yet but I plan to do it

13

I think canvas over pil. Another way might be to use anvil’s pdf renderer. Then convert the pdf to an image and use that instead.

14

Will it be possible for me to insert text from a data table into my pdf?

15

https://anvil.works/docs/media/quickstart-pdfs

Generate PDF invoices with Python

Generating PDFs with Python

16

Is the pdf to image function only available in paid plans?

17

Yes you’d need to use a third party python library to convert a pdf to an image. There are a few libraries with this functionality out there and most will be available on the full runtime.

e.g.

from pdf2image import convert_from_bytes
import io
import anvil.media

@anvil.server.callable
def create_pdf():
  # Create a pdf from 'Form2', and pass in 'name' and 'img' as its constructors
  pdf = anvil.pdf.render_form("Form2")
  images = convert_from_bytes(pdf.get_bytes())
  image = images[0]
  b = io.BytesIO()
  image.save(b, 'PNG')
  return anvil.BlobMedia('image/png', b.getvalue())

https://anvil.works/build#clone:CMMKJPWYLEQET2XV=73DTOXOO4QUCG742NQD72MJ3

You can use uplink to run the same code

1 Like
18

Okay, thanks. I’ll try it with uplink!

19

@stucork Awesome :star_struck:, I am wondering if I can create one long image out of multiple pdf pages?