Render HTML String Within A Webpage - javascript

I'm building a user dashboard in Django for a python based web service. This web service creates emails, and the HTML strings of these emails are saved in a file (and could theoretically also be saved in a db table). As part of the dashboard functionality I want to be able to preview the email, essentially rendering the html string of the email within the Django html view. Is it possible to do this? Will I need to work with a Javascript library to achieve this? Which one? Any help would be very appreciated!
EDIT
To clarify, the html string when put into a text editor is about 360+ lines. It has its own styling and it's own <head>, <body>, etcetera, tags. I want to display it like a webpage within a webpage, if that makes sense, so that it looks like a proper preview. I just have no idea how to do this, my experience hasn't really been with js or front end dev.

make the email html available like any other page and display it inside of an iframe.
be warned - email clients don't use the same rendering engines as browsers. its hell. (we use this - https://litmus.com)

Nothing more but:
document.getElementById('IDofDisplayContainer').innerHTML = 'your mail HTML string';

Related

Have frontend javascript access text file that is private to users

I'm having trouble putting into words what I want, but I'll try to explain better. What I want to do is have the javascript (or another solution, if there is one) be able to access a text file on a static site and use data from the text file (in whatever way). The catch is I don't want users browsing to the website to be able to access the text file itself, but only be able to see the output of however I use the file and display results. Is there a way to do this?
Like AVAVT et al. said, you can't do this. But you could transfer/obfuscate text data in your Javascript code text (though you can't prevent a user from viewing your script, so this isn't going to stop aggressive attempts at getting your raw data, if that's what you want).

Html pre fill form and execute filter

I have a website and want to have links to a page which has a filter function. I would like to create a link in such a way that when followed I do not simply get the destination page, but rather the page with a filter already applied.
To be more specific I am looking at the website for NetCDF CF standard names. From my page I would like to have link that would already filter e.g. for 'longitude' on the destination page.
The destination page is using javascript to apply the filter function.
Any ideas how to achieve that?
It's impossible to control a JS on a site from an external URL.
But you can do a something else: Download the data from the external site to your server via a server-side script (like php), and recreate the filters on your site in JS. But this way you should care about copyrights and you have to maintain your script if they changed the table structure they used.

Allowing user to type html tags and save them to file to display on website

I am writing blogging software from scratch (mostly as a learning experience). My method of allowing the blog owner to make a new post is for them to type the post into a form (textarea), including formatting tags such as <br />, and then use PHP to create a file and write it with the contents of the text area. This file is then loaded into the main blog page via an iframe.
My question is: how can I make this reasonably secure? As at the moment the owner could type anything (so could potentially add javascript or something). The owner interface is behind a login screen, and the textarea content never gets saved to a database, just a file, so my MySQL is safe enough. Just worried that blog owners (or anyone who got past the login screen) could create dangerous files.
Any suggestions??
Well, you could use strip_tags to strip tags that aren't allowed.
echo strip_tags('<p>Hello, I am a paragraph. And I am a link</p><script>// I am something that will be stripped</script>','<p><a>');
would output
<p>Hello, I am a paragraph. And I am a link</p>// I am something that will be stripped<p><a>

Alternate approaches for Rendering UI from xml

In my project which is a legacy application , the html pages are rendered from xml. i.e the backend with pass the xml to the jsp and using xslt we generate the html content. Applying xslt on xml is done in browser using java script. The output of xslt will be a rich html content which will the view for user. And user can do edit actions like modifying values in form fields, adding dynamic items like new address lines etc. At the time of submit java script will read all the inputs (including dynamic user actions added a new row) and update the xml accordingly. Then this xml will be send back to backend and java code will parse the xml to see that user has modified and act accordingly.
I was thinking of alternate approach to build UI based on the input xml and with the facility to update xml in front end itself.
Any suggesstions on different approach?
At my work some coworkers are using a very similar approach: The whole data is hold in a SQL-Database and got exported as XML. Further the XML got processed to XHTML via XSLT-Stylesheets to static pages. It is not intended that users edit content, so static HTML is absolutely fine.
In my case this make sense, in yours maybe not. Why you are not using the common Web-Application-Framework approach?
If you really want to stay with your "XML->HTML with JS in browser"-solution try Knockout. It should make your life much easier (Model-Binding, Auto-Update, MVC-Pattern/Templating)

Load dynamic css in javascript

I have a javascript file that other people use on their site. It creates a button and loads a css file that is hosted on our server:
style.setAttribute('href', 'http://mysite.com/assets/some.css');
The user can call it in their site like so:
<script type="text/javascript" src="http://mysite.com/global.js"></script>
I want to give the user the ability to upload their own CSS file on my web app that will replace the one that I am setting in global.js.
Currently, I added a custom_css:binary column in the Users table that will hold the CSS file, but this requires the user to stay signed in on the site. I'm not sure if this is the right way to approach this or if there is a better way to do it. Also, what are some security risks to this approach?
I'm using RoR for the backend.
Any help would be great!
UPDATE 1
I'm able to store the uploaded JS file and load the custom CSS, but it's currently checking the current_user - this means the stylesheet will not be rendered for the users. How can I work around this?
I was able to find the solution myself.
There are several ways to approach this:
Add a query string to the JS src
Scrape the page for a certain element that gets generated by your script
I opted for option 1. When I detect a dynamically generated query string, I send that over to the controller in the params hash and load the css file accordingly.

Categories

Resources