I have an iFrame with designmode turned on. In the document I have several 'special' elements which can be pasted by the user through menu selections (custom characters/identifiers/descriptions used within the wider application that are fixed). I need to protect these html elements from modification and treat them as a single entity if the user chooses to select or delete them. An example iframe would look like this:
<iframe><html dir="ltr"><head></head><body class="editableDoc"><p>Here is a <span class="special readonly">SPECIAL</span> character</p></body></html></iframe>Design mode enables editing of the whole body contents which is exactly as I need it.
What would be the best way to protect the 'readonly' span? The best description I can give is that I want the span and its contents to be treated as if it were a single character for all user text operations (i.e. moving the cursor, selecting, deleting). I have tried setting contenteditable="false" on the span element and this does have many of the desired effects, but it works badly in IE8/9 and has other, smaller issues in other browsers. Plus I'm not sure mixing designmode and contenteditable in the same solution is a good idea.
Best Answer
You can use contentEditable=false like so:
<body contenteditable><p>Here is a <span contenteditable='false'>SPECIAL</span> character</p></body>This works whether it's in an iframe or not. It works in Chrome and Firefox — likely works in recent IEs too, considering that it's not prefixed.
Demo at: http://codepen.io/bfred-it/pen/bGhaC
A similar question here: contenteditable=false inside contenteditable=true block is still editable in IE8
One of the potential security risks associated with the use of document.designmode is the possibility of unauthorized content modification. When document.designmode is enabled, any user can edit the content of the webpage, which opens up the door for malicious activities such as injecting harmful scripts or altering sensitive information.
Another concern is the potential for cross-site scripting (XSS) attacks. If an attacker is able to trick a user into enabling document.designmode on a compromised website, they can inject malicious code and gain access to sensitive user data or perform unauthorized actions on behalf of the user.
Additionally, document.designmode can also be exploited to bypass certain security measures implemented by websites. By enabling document.designmode, an attacker may be able to manipulate form data, disable form validation, or bypass input restrictions, which can lead to various security vulnerabilities.
To mitigate these security risks, it is crucial to carefully evaluate the necessity of enabling document.designmode on a website. Implementing strict access controls, input validation, and sanitization of user-generated content can help minimize the potential impact of document.designmode security issues.
Use the read-only value of the user-modify CSS property to protect a span in Firefox and Chrome:
<iframe src="about:blank" srcdoc="<body contenteditable><span style='-webkit-user-modify: read-only; -moz-user-modify: read-only;'>Hi</span></body>"></iframe>