I am on a project to provide a platform that will allow my users to write blog and customize the look of the page however they want it using just html and css. I will be using python/django. I am just concern as to how do I go forward with it. Will there be any security issues that I should be concerned about? If you could guide me on how to proceed I would be very grateful.
For starters, check this question. You will need to remove the tags (and attributes) that may create dangerous behaviours (like the script tag or the onload attribute).
Give them fields to add their css and html(for this add a pretty wysiwyg editor like ckeditor, tinymce, etc.
In css, stripping html and removing urls should be enough (let me know if there is something additional on this part.). Put the css inside a tag in the head.
For html you should be adding the content inside with the safe filter {{content|safe}} after your mandatory content (if there is a global navbar, etc).
Again, kill dangerous tags as soon as possible...script, iframe, etc.
With something like this, user should have control over the layout of their content and the style of that section of the site. This is assuming you want to have the same structure for all users (i.e. sidebar to the right showing the 3 latest entries).
If you want to give them some more customization, the easiest way (both for developers and users) is just show them a list of options (ie. sidebar can show n latest entries, it shows/hide blogger info, it does have social share options, blog entry has comments enabled, etc).
Related
I'm working on a site to help students with ACT prep, and I want to have a page where I can post explanations to questions that people submit. I want to be able to put a few tags on each post so that site visitors can click on or search whatever's relevant for them in the archives ("semicolons", "geometry", etc.) and all the relevant posts will come up, blog style. I'm very new to this, though, and I don't know how to do it or even what to search - when I search for tags I keep getting SEO recommendations, and that doesn't seem like the right thing.
Here's a solution (but it's not great)
It might be the only way to make what you want happen with a static HTML site.
You could, by hand, create pages that you fill with links to all of the posts that fit a certain category or "tag". For example, you could make a page that has links to all of your posts concerning geometry. Lets call this your archive page for geometry.
Then, when you include tags in a post, you would make each tag link to it's corresponding archive page.
Why do I say its not the best solution?
Virtually every blog that you see has a "back end" with a database that stores posts. When someone comes to your website and looks at a post, that posts data is inserted into a template and displayed to the user. You do not have to re-write the entire web page every time. Thing like the header, sidebar, footer, main page background etc are all in a template.
Having a database also lets you search the database and return relevant results. And a blog with a back end will typically let you write rules (or have them already written) that say, when you add a "tag" to a post, a link to that post should be automatically added to an archive page etc.
As far as I can tell you don't have database, so you'll just be linking static HTML pages. That means that every time you make a new post, you'll have to add a link to all of it's relevant archive pages by hand. Maybe you don't mind that now, but eventually it will be a nightmare to maintain.
I would strongly encourage you to look into a blogging platform like Wordpress to make your site. It will be more complicated to learn at first, but technology that's meant to do what you want it to do will ultimately be easier to use and maintain than technology that's simply meant to mark up a page.
one might assume that this would be quite a common question, but I couldn't find any helpful answers yet, so I'll ask. I have to add that I find the whole structure of mediawiki and also their help pages very confusing.
I'm not expecting an exact answer, I'll also be grateful for resources that will help me understand just how mediawiki is structured.
OK, so:
I want to set up a Wiki for personal uses, and I'm trying to get the sidebar customized to my needs, especially I want to have the section headings (that would be level 2 to, say, 4 headings) of the page that is currently viewed displayed in the sidebar (as anchors, I guess).
In other words, have the table of contents not on the top of the body / content part, but on the left hand side in the sidebar.
I have somewhat edited MediaWiki:Sidebar and could get rid of some stuff that I don't really need, but I just can't find a way to get a table of contents there.
Do I need an extension or is this possible with MWs standard functions?
I've seen this, but I would prefer not to edit the html or js myself and rather just edit MediaWiki:Sidebar if that is possible at all.
Thanks for any answers.
There isn't a build in way to do that. I don't know any extension, which actually provides such a feature. But there is a JavaScript, written by a MediaWiki developer, which does, I assume, what you're looking for:
https://github.com/prtksxna/persistent-toc
It will show all ToC levels at the left side, if the first visible area of the page goes out of the viewport (and the top ToC box isn't visible anymore). It would maybe not a big deal to limit the ToC to level 2-4. You could install this script via your MediaWiki:Common.js, your user specific js (like I did for WMF [projects][1] or you create a new extension, which adds the script and the css to your page.
[1]: https://meta.wikimedia.org/wiki/User:Florianschmidtwelzow/global.js projects
I would like to be able to access a site's HTML in Wordpress in order for fine editing/customization. At the moment, to access the HTML of the page I am going to Chrome Developer tools where I can see all the html for the site in the bottom left-hand window.
But when I try and access it from the Wordpress dashboard, all I can find are files such as 'single.php', which are written using php loops and I cannot seem to trace where the original html elements are.
For example, for changing the number of columns in a contact form 'message' box.
Any ideas?
Wordpress is template-based. As you already mentioned there are templates such as single.php, content.php etc. In order to change the lay-out of the website (or better, the structure) you have to change the corresponding template. If you want to change the style, you have to edit the style.css of your theme.
If you want to change the HTML of individual posts or pages, you can simply click the "edit" button and instead of using the WYSIWYG editor, you can swap to a standard text editor.
Wordpress is very well documented. Here is a guide to get you started on editing files.
WordPress, like pretty much any popular CMS, produces its HTML by combining three basic factors:
The active theme
The enabled plugins
The stored content
While the latter is merely data stored in a database, the other two are responsible for deciding what to pull from the database, how to filter it and how to render it.
So the final HTML your browser receives cannot be a subject of arbitary manipulation. You can change some things by developing your own theme, some others by installing or building extra plugins but not the final, dynamically-produced output.
Consequently, I highly doubt there will ever be a plugin that gives you the opportunity to do what you ask.
Why is the editable html moved into an iFrame? I analysed different editors (TinyMce, CKEditor, etc) and all move the editable content into a separate iFrame which they lay over the original text.
What is the technical reason for this. I experimented with the contenteditable="true", which is the base of all this editors too, and didn't find a reason yet to do this.
I'm CKEditor core developer. Not for a long time - just for last half of the year, but I've learnt a lot about why we use iframed editable :)
Styling - content of the iframed editor doesn't inherit styles of the page. This is extremely important, because we cannot reset styles (sic! CSS really sucks). What's more - in iframe we can freely add our own styles which is helpful too.
Only in iframed editable we can work on entire page with head, metas, body styles, title, etc. Some of our users need this.
Browsers have very buggy (and incomplete) impls of contenteditable. E.g. guess what will happen when you paste list into the editable which is a <h1> element on Firefox (you can check that in this editor - http://createjs.org/demo/hallo/)? It will leak out of editable area and become a non-editable element. We have to handle these cases manually in the editor and this is really hard work :).
I'm not sure about this but I believe that designMode wich allows to switch entire document into the editable area had been first and contenteditable came later. So the reason may be historical too - it's hard to switch from one approach to another.
Probably there're more reasons why we use an iframed editable. I'll update my answer when I'll learn them :)
From the tinymce froum
Hi Zappino!
It is the very nature of editors like TinyMCE to use an IFrame because
in a frame you can modify any part of an HTML document to suit your
needs without breaking anything in the main page's document.
Especially if you want to edit a complete HTML document including the
parts between and you won't be able to do so without an
IFrame.
Cross Domain Skripting will occur if you store TinyMCE's files on a
different (sub-)domain than the page from which you embed the editor.
Show us a test scenario of your installation with which you are having
trouble and someone might be able to help you out!
Greetings from Germany (back to Germany )
Felix Riesterer.
I have a page with two textareas, where registered users can fill them with HTML codes. First one has TinyMCE (so HTML is cleaned up), but the other one does not, since I expect the code to be inserted as embed codes from other sites (mostly sites that provide maps, e.g. Google Maps, MapMyRace.com, etc). But problem is that those other sites may provide different tags, not just <embed> or <iframe>. So I can't strip tags because then I might strip tags that I didn't know other sites provided. I will save the HTML in these two textareas into my database, to be retrieved and displayed as parts of some other pages.
Do you have any suggestions to make this setup more secure? Or should I disallow free input of HTML in the 2nd textarea altogether? (Or.. I let the users tick a check box saying "I accept full responsibility for the behavior of the code I am inserting".. LOL)
Your opinion is highly appreciated :)
Thanks
The short answer is : free HTML is insecure and must be avoided. Nothing blocks your user from creating an iframe that redirects the user to some harmful page or put ads on your page or deface your site.
My favorite approach to this problem is to allow the user to paste a link (no the "embed on page" iframe code) in a text box. Then I use regex to identify the pasted link (is it youtube, Bing maps, ...) and I create the HTML from the pasted link, which isn't too complex for most iframe providers. It's much more work for you, and it restricts the APIs you can put on your page, but it's secure.
Letting your users use arbitrary HTML is dangerous. You may want to have a black and white lists of tags that you disallow and allow (respectively).