I am working with a web project where I have full control on the "client web page" (I can add or modify HTML / CSS / JS)
The content management system is, however, not under our control. That CMS exposes one text box where I can input some description text that will be displayed on client web page but does html sanitization which remove all html tags. This prevent me from styling my text field.
Basically
<h2 class="red-text">Some Text I Wanna Style</h2>
Become just Some Text I Wanna Style
I trust that there is some way around this as I have full access to the client side which means I can implement my own "markup system" like BBCode?
[b]bolded text[/b]
Where I can find the tag and use JS to transform it to appropriate CSS class.
My question is that: Am I approaching this issue the correct way? Is there any standard/common method/library to solve this kind of problem?
Edit: I do not have access to the server side, only the client side
If you're only using light markup, then try using Markdown! Its ridiculously popular and has a million libraries in every language conceivable (most of all JS).
Almost certainly the easiest thing to use, given the simplicity of the libraries that exist for it. If its suitable for this project, I highly recommend it :)
I imagine that some libraries support extending the syntax with your own, custom rules too!
Related
I'm willing to make an easy to use web-interfaced report builder. Basically, I would be like a big html form with some custom logic (if you check this box then that part of the form appears/disappears), uploading of images and rich text (bold, italic, colors). The user should be able to extract a pdf (that might be either server or client rendered). Some parts of the page should appear in the final pdf, some not. I need to control the page-breaks.
I could build a totally custom web-page for that and plug the result in a custom template in PDFjs, but I was curious if some solutions already exist for this problem. I've looked into jsreport and it's nice, but it is too complicated for my users to edit html directly. I would need more of a wrapper with simple fields. PDF forms, on the other end of the spectrum, are too rigid (an frankly, a pain to deal with) for my use-case.
To me, it feels like this problem is common enough, and should appear in enough companies that some rich template solution (or at least, general approach) might exist somewhere. Are you aware of such solution ? If not, what general tools would you use ? (PDFjs, Prosemirror, ..)
Thanks for your help !
Let's say you want to be able to display some rich text in your app, and you want to design the backend API for that purpose.
Rich text can be :
paragraphs
Some bold or italic texts
titles from 1 to 6 weight
images
This is easy to do in HTML.
You could create the rich text I need, then store its whole HTML in the backend model's field.
Then retrieve it through your backend API as a HTML String and display it in a webview in your app or something.
But that sounds like a bad practice although I'm not too sure.
Please share your thoughts and experience about this.
Also, what would be a better practice for this kind of use case ?
It's usually not a good idea to store and display HTML as is, especially if it can be entered by a user (See HTML injection). If the HTML is always from a trusted source however it should be fine to store the HTML as is.
Some better alternatives would be to allow the users to enter markdown instead of HTML, that can then be converted to HTML when it is displayed.
If however markdown does not meet all of your criteria the HTML that will be stored and later displayed should be stripped of all possible malicious tags, for example <script> and <iframe>.
The best means of displaying HTML is likely some kind of web viewing component, which tend to be quite heavy by their nature.
What I would consider, in your situation, is a markdown component. The reason for this is markdown maps to NSAttributedString quite closely.
^^ All opinion, of course.
I'm pretty sure this is a common requirement, I'm just a bit new to js and I'm not sure what to search for. Please point me to the right direction if this is a duplicate.
So we have customizable areas on our website wherein you can put in tags and css to modify the looks of that area. We are wary that people might put in malicious js code in there.
So we were thinking of a way to disable java script on those areas.
Is there a best practice for that? Or any right approach to do that?
Yes, this is a common requirement. You need to sanitize the HTML and CSS that you receive from users to ensure it doesn't contain any JavaScript or anything that will surreptitiously load JavaScript. This is non-trivial, so there are tools for it: HTML sanitizers (and CSS sanitizers). These are proper, full-on HTML and CSS parsers that you give whitelists to to allow certain tags and attributes and to disallow other tags and attributes (and limit values of attributes).
The sanitizers need to run server-side, and ensure that the user-supplied content is sanitized before being displayed to any other user.1 So you'll need to find the right tool for your server-side environment, such as the HTML Agility Pack for .Net, OWASP Anti-Samy for Java, etc.
1 The natural instinct is to sanitize it on receipt, but just sanitizing on receipt isn't good enough, because if you find a flaw in your rules, you have to re-sanitize everything you've stored, or sanitize on both receipt and delivery.
At work I have been thrown in the deep end. A customer required some functionality on the web and one of our devs knocked together an ASP.Net webforms project.
When I started, because of constraints I got handed this project. I am not a web dev (I've dabbled) but because of the work I have put into the project, the customer is now looking for more functionality to be built into the web solution.
I would like to take a look at MVC (on my own time). With a view of converting the project to it. I come from a Xaml background so MVx jives with me.
I seem to have most of the basic theory nailed down except for one thing. What is the best way to use JQuery on the view?
Should the controller just pass back semantic data and the view (via JQuery) makes it pretty / unstatic (with help from JQuery UI).
I am confused but from what I can gather is it correct to assume JQuery (in terms of MVC) is like a client side View engine that would handle things like theming, hiding controls, simple validation, popups, etc?
jQuery (and JavaScript in general) can be used to enhance the behaviour of a page. I say enhance, because it should basically work without JavaScript. About 2% of users do not have JavaScript enabled.
CSS should be used to enhance the presentation (or styling) of a page.
The HTML itself is effectively a vector for your raw data which also provides a semantic context. For example, data in a p tag means that that data is a paragraph. Browsers have CSS defined for HTML elements so that by default, the raw data with a semantic context will look vaguely sensible.
So, with regards to "is it correct to assume JQuery (in terms of MVC) is like a client side View engine that would handle things like theming, hiding controls, simple validation, popups, etc?":
Theming should be done using CSS, as it is presentation. The theming you get from the jQuery UI library just gives you some CSS, which is fine.
Hiding / showing content based on events, popups and validation should be done server-side, but JavaScript can be used as well to enhance the behavioural experience.
Pretty much exactly as you said, the controller should pass data to the view which should be rendered using HTML and structured using CSS.
You can then use jQuery to add validation/dynamic effects/ajax etc.
I think you should see Javascript more like an addon to mock things up. For example:
You've got a serverside validation, but you don't want to reload the whole page all the time, then the javascript is good, but it's an addon, because when you don't have a serverside security, someone who hasn't got javascript turned on, or simply doesn't have it, is going to bypass your security easily.
Jquery in this case, is to make those tasks easier to implement.
I know in ASP.net the hiding of controls and the form submits are standard javascript. But it isn't good practice to do this.
Implementing it in MVC is easy as you just need to put it in the scripts map and then load it with a method in your cshtml page.
For more information about how to build your webpage for alot of browsers, i would recommend you searching after progressive enhancement.
Im looking to create an input field on a web application that is similar to the one we use here for posting questions, where you can put list items, make font bold/italic etc
Does anybody know here know of the code to do this? or could they point me in the right direction of code snippets/hints...ive tried using google chromes 'inspect element' function but cannot find the actual code behind it except that they have a class and id
The languages I can work with are JavaScript, HTML, CSS, VBScript. Ideally I wouldnt want to abstract from these languages at this time if possible.
Stack Exchange uses Markdown, a WYSIWYM (What you see is what you mean) markup language. The original implementation is in Perl, although ports to many other server-side languages are also available.
The editor you're looking at is a modified version of wmd, combined with showdown.js, a JavaScript implementation of the original Markdown language that allows client-side rendering of Markdown text into HTML which allows you to see the preview when writing and editing posts here.