I am using Emmet Livestyle with Chrome and Sublime text editor. I am editing my files locally and can update my css and js from the devtools so that those changes are reflected at the same time in my local files too. But how can I update my html code too?
We cannot persist HTML edits back. Because, well, you aren't editing HTML. Here is what is going on...
The server sends Chrome the page (HTML.) This is taken, tokenized, then a DOM (Document Object Model) is constructed out of it. The page is then trashed and only the DOM is kept in memory. That is what you are seeing on the Elements panel. That panel is the full DOM as it is, made to look like HTML markup for ease-of-use.
That HTML sent down from the server, can be generated by PHP, Ruby, C, hand-coded, whatever. There is no way for DevTools to know. So, there is no way for us to transfer source edits in the DOM back automatically. CSS and JS both can take advantage of sourcemaps so DevTools know where to send things back. It isn't 100%, since say if you are using a variable you aren't editing the variable back but changing the set value (at least in CSS.) But it is good enough for the majority of uses. With HTML generation by backend languages, these kinds of kinks become even more complex, unmanageable, and will end up providing not the best experience for developers.
The best thing you can do is setup workspaces and move to editing your source in DevTools. However, this has the pitfall that custom extensions are not supported at this time. So you have a very generic writing experience going this route.
Browser is a http client..... html code is supplied from the server...... If you're developing and owner of the server side code.... Then replicate the changes you made in the cascading style sheet at the server side.
Related
So I've made some little modifications to a particular website (background color, fonts, etc...) and I want these changes to be permanently applied for the next visits.
The issue is when I refresh the website, it goes back to its initial form.
Wether it's for Google or Safari web browser, is there a way to accomplish such task?
The thing is that each time you enter a website your browser downloads the whole DOM code of this site. The changes you make with Chrome's or Safari's dev tools applies only for the already-downloaded DOM that is displayed on your browser, but next time you will enter the same website, a new DOM will be downloaded and displayed - without your changes.
So, actually, I'm sorry but what you want is not possible.
What you can do is:
Save the modified HTML code to your PC (I don't know if it helps you).
Use an extension that allows you to run a JS code automatically on page load (there are bunch of this kind of extensions), and with that JS code you can manipulate the DOM the way you wish to. Yea I know, that solution involves maybe long code writing but this is the way you can change the new DOM every time - automatically.
My college has some web software that is absolutely horrific and I want to redesign it locally to save my eyes. Obviously I could use developer tools but that gets overwritten on a reload, but I was wondering if it's possible to edit something in the developer tools (like remove a div) and to then 'save' it as to intercept any response from the server and rewrite it using the HTML I have 'saved'
My solution was a hacky one but it worked. I decided to use TamperMonkey, which injects JavaScript code in the bottom on a HTML page. Using this and JQuery, I just modified the HTML.
I currently have a form that allows administrators to change basic CSS attributes on a website. I was thinking of creating a form for advanced admins that will display the entire CSS file inside a text area and allow them to edit it freely. Im not worried about the file being wiped as it can be easily restored. What i am worried about is that someone could add some code to the CSS file that could cause major damage to the web server. Is it possible to execute malicious code from a CSS file?
Yes, there are some XSS risks to consider. XSS doesn't attack your webserver directly with malicious code. It is an attack on other users of your system, via their own browser. Basically, it is a browser based code execution flaw, albeit limited via what JavaScript can do (quite a lot though, bar from escaping from the browser sandbox).
As you are letting them edit text presented in a CSS file, this mitigates some of the attacks that are only possible when CSS is embedded in an HTML document (such as via STYLE="" attributes and <style> tags).
However, the following risks are still present:
The JavaScript expression directive allows JavaScript to be inserted into a CSS stylesheet. Note that this only affects Internet Explorer version 8 and earlier.
The url directive can allow JavaScript: style URLs on Internet Explorer 6.
Script execution via -moz-binding is available on Firefox 2 and 3. The Google Browser Security Handbook doesn't appear to have been updated since Firefox 3. This post indicates this is now fixed so that the XML file has to be readable from your own domain. XBL doesn't seem to be possible in current versions of Firefox.
In Internet Explorer 10 and earlier HTML Components allow script execution in CSS.
Note that allowing users to alter your CSS gives them the ability to freely position text. This would enable a malicious user to mimic trusted UI elements with their CSS code and possibly being able to trick users with the newly rendered page. This very much depends on the functionality present and the intent of the rest of your site. Definitely bear this in mind.
It can if they have access to modify. The below link describes xss and css (cross site scripting). They can redirect your background as one example
http://www.acunetix.com/websitesecurity/cross-site-scripting/
If they have access to the css file they can link it to another file that contains malicious content
Potential xss vulnerability if style.css is served with the wrong content-type header.
style.css
<script>
alert(document.cookie)
</script>
attack.html
<iframe src="style.css"></iframe>
I am thinking to create an website that generates HTML through a wizard.Finally, I want to make the users to buy the generated HTML source if they like what they see.
But I don't want to let the users to steal the HTML, CSS and JS that I use to create the effect they want.
I want a technique which is immune to Firebug and Right Click -> View Page Source.
Any thoughts ?
edit: I remember something about iframes or frameset, but I'm not sure how to fool the browser and Firebug to execute the code without updating their capability of showing that source code. A popup is also a possible solution.
edit 2: html hosted in silverlight ? will you use it ?
The best thing you can do is to just obfuscate your code. Trying to hide the source is not going to work (for ex: if you disable right click-> view source that doesn't stop them from using the menu or saving the page or using a shortcut key or writing an app to stream the http request into a file and open that, etc).
Firstly, depending on what you are doing you can have the HTML code loaded through JS after the page load (AJAX).
As far as your JS goes:
Free Obfuscator
Not Free Obfuscator
In the end though, there is no stopping someone who really wants to get that source. Even obfuscated code can be rebuilt (though it's hell on wheels painful depending on how good the obfuscator is).
To really protect the sample HTML from prying eyes, you'd need to render it on the server-side and only pass image data to the client. If you want the user to be able to interact with the sample as if it were a normal Web page, you'll also need to send their pointer and keyboard inputs to the server and update the displayed image when necessary. At that point, though, you're basically making an HTTP-based version of VNC. This is definitely possible, but I don't think it will be easy, and I doubt there are any existing software packages to let you do this. If I were you, I'd rethink my business model a bit.
Sending XSL-templated XML to the browser may be enough fool some, and it will work more or less the same in many modern browsers including IE6 (maybe even 5.5).
But really, trying to hide the HTML code isn't going to work if anyone halfway serious wants to get it.
I am thinking to create an website that generates HTML through a wizard.
Finally, I want to make the users to buy the generated HTML source if they like what they see.
If this is what you need you might consider the possibility of creating a preview of the page as an image, and provide the download of the source only after the user agreed and paid. There is no magic way to let a browser display a code that you can't see.
You can make a video, showing the functionality and upload the same, which may help users to view / feel it.
I'm in the process of reproducing some standalone HTML forms as pages in a CMS that uses FCKEditor by simply copying and pasting the relevant code into the editor.
But when I save and view the page, the HTML has been changed and the tag has been moved up to just below the open tag -- and not at the bottom of the form. This obviously renders all of the fields in the form, including the submit button, useless.
Is there a way to tell FCKEditor that I know what I'm doing and I don't need it to validate the HTML output?
Unfortunately this is a hosted CMS service (actually part of an email blast tool) so making changes to the configuration will mean I need to go through the company's support system, which is fine -- but they haven't been able to solve it for me yet, so I'm hoping to get the answers for them.
Thanks!
This is a bit of a difficult thing because as far as I know, it's not necessarily the WYSIWYG editors that "fix" "broken" HTML, it's the browsers' HTML editing engines themselves, and it's often near impossible to talk them out of doing this.
You'd have to show your exact source to get detailed feedback, but check out whether protectedSource is something for you. It's supposed to protect code that is covered by the regular expression you specify.
I'm not sure about FCKEditor, but you might want to consider switching to TinyMCE. TinyMCE allows you to both edit a list of allowed tags, and to turn off HTML validation off completely if you like.