Same Origin Third Party Scripts sameSite attributes sink lighthouse score. There must be some fix - google-chrome-devtools

graphcomment.com is not a bad commenting system, quicker to implement than an opensource solution on github pages, and allows for guesting commenting.
Of course, like most third-party services once it's it wants to load a lot of resources and collect cookies without setting any decent sameSite attributes.
This destroys lighthouse scores on any page you add comments.
Lighthouse score for project website without graphcomment:
Lighthouse score for project website with graphcomment:
How would you fix this?
Implement CSP strategy to block individual resources and run tests?

I figured out a solution then found code out there to help get it done.
Obviously, just lazy load the third-party script, in this case graph-comment's script.
I did it with window.requestAnimationFrame and an isElementInViewport function, because that's how I run animations in the viewport.
Then create a script element and inside of the check to see if script element exists, onload your third-party-scripts.
Works 100% (okay, 99%)

Related

How to reverse engineer a progressive web app ?

I found this free PWA https://www.the-qrcode-generator.com and now wonder how I could do one such myself.
Since I couldn't find any access to its source code I wondered if it'd be difficult to reverse engineer.
I'm interested in building a PWA with QRCode functionality.
This one was created with AngularJS v1.3.20. You can find the source in your console windows under Sources tab. You can easily beautify the code inside the window to make it readable.
If you want to know how they organized their rest API, the browser network tab will help a lot, just filter by XHR and examine all the call from the front end to be.
The front end is very hard to revers engineer, because most sites are served as minified bundles, so you can't see the original code.
You can however find some other information about what they used to build it, for example in the html source you can see some ng-* tags, which indicates that this is angular, you can also see that body has attribute data-ng-app meaning this is angularjs and so on.
For the QR logic you can see that there are no back end calls, meaning that it is written entirely in the client. I would search for already available solutions for that.

deleting page version numbers in form action URLs in wicket for stress testing purposes

I want to stress test a system based on Apache Wicket, using grinder.
So what I did was that I used grinder's TCP Proxy tool to record a test session in my Application and then fed the generated test script to grinder to stress test the system; but we found out the tests aren't carried out successfully.
After a lot of tweaking and debugging, we found out that the problem was within the wicket's URL generation system, where it mixes the page version number into its URLs.
So I searched and found solutions for removing that page version number from the URLs (Like this), and used them and they worked and removed those version numbers from the URLs used in the browser. But then again, the tests didn't work.
So I inspected more and found out that even though the URLs are clean now, the action attribute of forms still use URLs mixed with page version number like this one : ./?4-1.[wicket-path of the form]
So is there anyway to remove these version numbers from form URLs as well? If not, is there any other way to overcome this problem and be able to stress test a wicket web application?
Thanks in advance
I have not used grinder, but I have successfully load-tested my wicket application using JMeter Proxy; without changing Wicket's default version mechanism.
Here is the JMeter step-by-step link for your reference:
https://jmeter.apache.org/usermanual/jmeter_proxy_step_by_step.pdf
Basically, all I did was running proxy server to accept web requests from the browser to capture the test scenarios. Once done collecting the samples, then change the target host url to whichever server you want to point to (other than your localhost).
Alternatively, there is another load testing tool BlazeMeter (compatible with JMeter). You could add the chrome browser plugin for quick understanding.
Also, you might want to consider mounting your packages to individual urls for 'cleaner' urls. That way, you have set of known urls generated for pages within same package (for example, /reports for all the reports pages within reports package).
Hope this helps!
-Mihir.
You should not ignore/remove the pageId from the urls. If you remove them then you will request a completely new instance of the page, i.e. you will lose any state from the original page.
Instead of using the href when recording you need to use the attribute set (by you!) with org.apache.wicket.settings.DebugSettings#setComponentPathAttributeName(String).
So Grinder/JMeter/Gatling/... should keep track of this special attribute instead of 'href' and later find the link to click by using CSS/XSLT selector.
P.S. If you are not afraid of writing some Scala code then you can take a look at https://github.com/vanillasource/wicket-gatling.

OwnCloud enhance core features with App (eg. user registration)

I started looking into OwnCloud app development to add some capabilities I would like to my server. To me it seems like Apps can't modify anything like the Login page or User Management page. Is this the case?
I want to build a user registration app and would love to integrate it into the user management page (if not and it has to exist as its own app page not a big deal). The one big problem I see so far is not being able to add a "Register" link to the login page. I could just go in and add it to the source manually, but I would like to keep the App self contained so others can use it too.
If this is not possible to do in an App I may just need to modify the core application and then see if they will accept my feature addition in a pull request.
Thanks to anyone who can shed some light on this for me. I don't want to waste my time trying to figure out how to do it with an App on the platform if it wont be doable.
After a lot of digging around I did figure out a way to do this.
In the App's app.php file, you can force a script to be loaded if the plugin is enabled:
$api->addScript('script_name'); // without .js
In that script jQuery can be used to add the elements to the page where you need them.
This was a good solution for me since I only needed to add a single button to the login page. I can see this being a bad idea if you want to make vast modifications. At that point you might as well just create a separate page that you have full control over.

Google Content Experiments for whole part of the site

I want to run an A/B-test or an experiment for whole part of the site. For example on my /blog/ page, where one variation would have a newsletter form and other variation a free ebook download button.
The problem is that I have to use a full URL path for the experiments, for example /blog/2013/article/1?var=1 and /blog/2013/article/1?var=2 With this method I would need create a new experiment for each blog post. This is impossible.
Any tips on how to approach this?
It's possible, but the documentation is lacking.
When you choose your variation URLs, you need to use relative instead of http://. This let's you use query parameters to define the variations, instead of the full URL. In your example, you would define your original page as:
http: //www.example.com/blog/2013/article/1
and your variation URLs would be ?var=1, var=2, etc. using relative as the option in the dropdown (instead of http:// or https://).
Here's the not-so-clear documentation on using relative URLs for your variations:
https://support.google.com/analytics/answer/2664470?hl=en&ref_topic=1745208
One important thing to remember is that if you're doing it this way, you need to include the content experiment code on every "original" page.
There's also another way to have even more control over serving the variation pages and controlling the experiment using the Content Experiments JavScript API. This is a relatively new feature - you can see the developer documentation about this here:
https://developers.google.com/analytics/devguides/collection/gajs/experiments
I am not sure this is possible. You might look at a more robust yet simple to use tool like Visual Website Optimizer or Optimizely.

GWT Lazy Loading

I want to develop a GWT application. The application contains 8 modules and all the modules run in a single page.
I have links for all the 7 options on the top.
When the page loads I want only the home content to be loaded and displayed.
Only when the user clicks the menu options, the menu content should load.
Can anyone suggest the best way to achieve this.
This has been addressed in GWT 2.0... First you'll remove the separate entry points you have for each module - since they're all on the same page, you only need one entry point per page.
Then you can use the GWT.runAsync() method at each point that you feel can be a split... it automatically cuts up the code into chunks that are downloaded as and when necessary.
Look here for the docs.
AFAIK, lazily loaded (or pluggable) modules can't be done in GWT. Partly this is due to the way the GWT compiler works - it likes to import all the code that it is ever going to see and then optimises and prunes it as viciously as possible (to make the resulting JS files as small and lead as possible). If it doesn't have access to all the source code up front, it might make optimisations that will break the pluggable modules (especially since nothing in the "core" application may reference the classes that the lazily-loaded modules need to work properly - the GWT compiler would prune those "unused" classes in the core module).
This stackoverflow question from May 09 asks the same thing and has the same answer - it can't be done.
I searched high and low about six months ago for an answer to this problem, because I really wanted to do what I believe you're asking for. Never found a solution.
(I haven't used GWT 2.0 - it might have addressed the issue)
Thank you for your answer. You are right that the whole Javascript code gets downloaded.
But there must be a way like say on of module is View Profile. Only when the user clicks the view Profile link, the widgets related to displaying my profile needs to be created. is this not possible.