Disabling Copy & Paste from Safari Reader - html

I'm a Web Designer, and I have this client who runs a paid subscription blog site that has sensative content that he does not want copied and shared (hence the paid subscription).
I've recently been able to successfully disable all ability to copy the content from the actual webpages (using a wordpress plugin, and also targeting some elements using css -webkit-user-select set to none)
But more recently I've become aware that you are still able to copy and paste all of the content if the user views the webpage using Safari's Reader. Is there anyway at all to diable the user's ability to copy text from inside Reader?
I appreciate any feedback and help you can send my way!
Thanks!

You may try to implement various "tricks" to disabling copying. They have basically to do with preventing default actions when click-dragging to select text (google for jQuery preventDefault). You bind an action an then preventDefault on the event when the action is triggered.
You may also attemp to prevent-defaut some keystokes like cmd-c and cmd-a
But... as the page is delivered to the browser the text is on the user's machine. So all the techniques above can be circumvented.
In some browsers the tricks above may not work. Or, a smart user, may open the page source and extract the text.
You may go further, rendering the text to image server-side.
But a motivated user may rewrite by hand the text...
Conclusion: you can make more difficult for the average user to copy text. It's impossible to avoid it completely.
Hope this helps...

Related

Can I label browser tabs across-origins?

I have a number of embedded devices with a web-based front end, each on a different randomly assigned ip address.
I often want to check between these devices but, when they're open in different tabs, it is hard to tell which is which.
I have attempted to embed these pages in iframes with a header labelling each one, but CORS prevented the pages from showing.
Is there a way I could get the opening page to label a tab or window to help me distinguish between similar looking pages? Failing that, and possibly in SuperUser territory, is there any way I could manually label the tabs in my browser once they're open?
Here's a partial answer. There are a number of third-party plugins for Chrome which allow the user to manually rename tabs. I have installed one called Simple Tab Renamer and it seems to be doing the job.
An automated system would be nicer, but I suspect security policies would prevent that.
https://chrome.google.com/webstore/detail/simple-tab-renamer/ailhpmlejogfdcpoflidmobgkgdemaog

Fill in webforms / auto login in AutoHotKey in Crome

I want to open a couple of webpages. Some require User-name password. Others requires to fill in certain files in a webpage.
There are multiple ways for AutoHotKey to fill in web forms, but all are based on "com" which only works with IE
I've googled a while for examples in what fill in webforms and/or login in Crome, but found non so far. Does anyone has an example of an AHK script what fill in fields in a webpage/form
First off I'm going to start by stating that you should have included code, after all this is a code review site rather than a "Hey I need codez" site...
Now to answer your question:
You are correct, COM Objects are the best way to interact with Websites in Windows, it's dead simple and just works (in IE). Since Chrome doesn't support COM, you are left with only working with within the limitations of the browser accepting keystrokes.
Your best shot is to use the Send command to navigate to your target field (I believe sending Tab multiple times when the window is active should work) and than Send the data you wish.
I would also suggest looking into #IfWinActive and BlockInput so that you won't accidentally send an inappropriate key stroke while filling in these forms.
There may be better options for this, such as KeePass or the like. Also it's generally not a good idea to store passwords in plain text, IE within an AHK Script.
Correct, it's not possible to use Com objects with Chrome, however this site has a ton of entry level how-to's to get started with using the com object in IE. This includes how to send specific fields text (without using the send or sendinput commands), and how to triggers onclick events on existing elements (without clicking on them).
This was were I started when I needed to learn how to interact with the com object.
https://autohotkey.com/board/topic/64563-basic-ahk-v11-com-tutorial-for-webpages/

HTML Form appearing on button press

I am a newbie to web development so sorry for my stupidity. I am actually creating a local website and I wanted to make a user profile page on that website. What I want to accomplish is that the profile page should be not be editable in the normal use case but when the user presses the Edit button (like in facebook), the fields become editable and a save button appears (basically a form but without reloading the page or any server side work). The user then updates the fields and saves. The save request will be sent to the server to update the database (can that somehow be done without reloading the page too ? i see facebook page does not reload when you edit and save).
So that is it. Waiting for a reply.
P.S. I think some javascript code will come to my rescue.
This is a very general question, so I can't do anything but give a general answer. I would highly recommend you learn jQuery.
jQuery makes it easy to manipulate the HTML and CSS from Javascript - which you'll need to do in order to show/hide the content and the forms for editing the content (or otherwise manipulate the code on the page in order to achieve what you want - there are various ways to do this, adriano's comment on your question lays out a good solution).
The specific part about sending such requests in the background is called AJAX, and jQuery has support for that too.

Automatically apply tinymce validation to all drupal pages

I happen to have inherited a drupal project where a common html validation error seems to occur on nearly every page. The validation error is so minor and easy, I actually only have to open any page up in the editor and the tinymce wysiwig editor will fix the problem automatically and I only need to save the page. Considering I will be needing to do this 30k+ times to apply it to the entire site, is there any way to have it either applied automatically to all pages or automated? Any and all suggestions welcome to help me speed up the process.
EDIT : Used solution
Since I'm not the most adept at finding a programming solution, I did find an addon for firefox letting me record et loop a series of actions called iMacros. Started it up in 5 different instances of FF and let it running all night and it's half done already. Certainly not the most efficient way of doing things, but may be a solution for those who, like me, aren't as advanced in programming.
Assuming you can loop through the pages somehow i would suggest to build a page where you include the code source into the editor root html element (textarea or whatever). Then after onInit (see the tinymce configuration options for this (setup parameter and onInit) ) you trigger the submit or save button which delivers the page to the server where it gets saved.
The pages textarea might then get filled with the code of the next page and so on...
The important part here is that your serverbackend is able to loop through the different pages and knows which page comes next when receiving the modified/corrected page code.

html file upload form

I have a web application with a simple file upload requirement (max 1 mb).
The web application is an externally exposed web site that must be (as much as possible) compatible with all browsers and versions.
We are using C# .net 3.5 ASP .Net (IIS 7) technology.
We are having trouble implementing the file upload control:
<input type="file" ... />
The buttons are not clicking correctly and different input methods (eg clicking on the text box in some browsers will open the input field).
We need to avoid 3rd party file upload tools.
What is the best way to make this compatible with all browsers?
Can we use frameworks (eg we could use JQuery) to do this?
Any help is really appreciated.
Edit:
Here are some more specific behaviour details:
Intended/Expected:
Consistent use of textbox field (for filename):
displays filename of selected file
no events fire launch of browse dialog
Consistent use of browse button:
same css standards as standard HTML button for look and feel
opens browse dialog
dialog cancel - clears textbox field
dialog ok - (re)populates textbox field
We would like to have the look and feel of the textbox and button to use the same css as the rest of our web site.
Current:
textbox click events opens dialog
generic display of textbox and button field
browse button not working with some browsers (not firing browse dialog event, but being displayed)
As much as possible the behaviour (events/actions as above) should be consistent between all browser types.
What is the best way to make this compatible with all browsers?
It's already compatible with all browsers. Just don't try too hard to script it or overhaul the style. You have minimal customisation possibilities with the file upload field, partly for obvious security reasons and partly because the multiple-part rendering of the text+button arrangement in many browsers is simply not amenable to styling primitives that operate on single boxes.
(eg clicking on the text box in some browsers will open the input field).
Luckily people whose browsers do that will already be used to file upload fields doing that; indeed, they will expect the browser to do that, and be confused if you manage to stop it.
(And it's a sensible measure: allowing typing in the filename field is seldom useful, but it has caused security holes in the past.)
Consistent use of browse button:
Nothing about the file upload field even mandates a browse button or file-finder dialogue box. You might have eg. drap and drop instead. The browser decides this; as the site author you don't get a look in.
We would like to have the look and feel of the textbox and button to use the same css as the rest of our web site.
This isn't really possible within the realms of HTML. Hence the “third party uploaders”, typically Flash with HTML fallback.
There is one approach that you can sort-of use to make a file upload look like you want, but it's not very nice. You style a text field and button however you like, listen for changes to the file upload field and copy the value to the text field to display. The text field must be read-only because it won't be possible to allow the user to pick a file from there.
You then put the real file upload control on top of the fake one with CSS positioning, and give it CSS opacity (alpha filter in IE) so it's so faint you can't see it. You then have to hope that the browser decides to put a clickable part of the file upload field over the top of where you have rendered your button. Though you can fiddle and check it to work in many popular browsers, it's really very brittle and almost certainly a complete waste of time.
You will not get a consistent UI. Each browser does it's own implementation. A Safari user will expect the Safari method, same for IE and so on.
You might have some success with CSS control of the box but be aware that modern browsers have a lot of security on this field. You will have limited control of this field compared to fields
If you follow instruction here: http://www.15seconds.com/issue/010504.htm
you should be able to have consistent behaviour. Having just
As for styling - this is a task for you. Make sure your HTML and CSS are compatible (work as expected) in all browsers that you support.