Create a plugin to add my website functionalities on another website - javascript

I have a website A with a database and a search engine of some object, user can create account on my website then add comment for these objects.
I need to create an api with something like a plugin, it will result on having the seach engine on another website B.
I have planned to do like fb or twitter plugins : the dev who want to use my api will just need to add a line of js, and a line of html on website B, then it will load the plugin. But I'm wondering how to organize it.
Here it what I've guessed : I create a page on my website A, put the search engin on it. I create a js that will load this page whithin an iframe, on the dev's page (website B), under the div he added to have my plugin. Then I implement OAuth 2 (with a provider and so, so people can do post requests to alter my db), and people who is one the website B will have the ability to post comment on the objects of the search engine on website B.
Actually it seems to be the same as fb comment plugin process, but it seem too complicated to do all that stuff. Is it the right way? Can anyone detail the problems that I should face during implementation?

You need to develop a decent API which can return search result in JSON (and XML if you want to please everyone). That already would offer other developer the ability to use your site functionalities, that's mostly back end work tho. So they can develop their own widget.
To develop your own widget as a search widget you don't need that much, you just need either a set target (maybe a required element) or/and an initialization method (more flexibility for the dev) to which you pass a target.
Bind the search button, grab terms search, call your API and when you get your result display them or/and execute a custom callback pass the result as an argument, flexibility)
If you do your javascript well you can create a little API there too which facilitate the usage of your API via javascript. And then even easily port it to a jQuery plugin or something similar.
When serving JSON always remember to set your headers for your API to allow for crossdomain or go for jsonp instead.

Your question implies an architectural direction, but the requirements are too broad for such a choice. I would narrow down your requirements first. OAuth 2.0 could potentially help satisfy your needs, but ask yourself at least the following:
What user data needs to be protected?
What 3rd-party data access is needed? What functionality?
If you go with OAuth 2.0, are you prepared to follow a spec which is still changing? Are you willing to be the authentication provider?
What server-side languages/platforms are acceptable?
What other security considerations are important to you? (Such as social sharing, level of 3rd-party app trust...)
How much are you willing to rely on 3rd-party tools? Or write your own?
I agree that modeling your design off FB or Twitter or Google is not a bad idea, as they have done this sort of thing.
You might have a look at the new book Getting Started with OAuth 2.0.

Here are two simple ways of making custom search available to users.
The simplest option is to do what Google does - the search on your site would follow a simple, well defined API - so that
www.mysite.com/search?q=keyword1+keyword2
returns a list of results in HTML.
Then you'd tell your users to include a snippet of HTML:
<form action="http://www.mysite.com/search" method="get">
<input name="q" type="text" value="Search">
</form>
That would do, though at this juncture you may want to improve things with better search options, a javascript wrapper for the search form, a JSON or XML format for the data returned, security, a better worked out API that takes all these into account.
Another way is to use javascript and provide the data with a callback facility, so the URL:
www.mysite.com/js-search?q=keyword1+keyword2&callback=someHandle
will return a javascript file containing JSON data and a call to "someHandle" when it is loaded. The developer using your API have to write their own way of making the request and the handler. Bear in mind that because of XSS, the queries would probably come from your partners' servers. The simplest is probably to make your own search offer simple and well-documented so others can exploit it.

OAuth 2 could be helpful just if you would allow the website B to make POST request to the website A in background.
Instead if you want allow the users that visit the website B to post a comment then the iframe with a form that point to the website A is enough.

The easier bet, yet not necessarily the wisest, is to create some JS which calls on your website using JSONP.
iFrames are not W3C standard, try avoiding them if possible. Code a Javascript with some events that will do some JSONP calls into your own server and return the results in Javascript accordingly, so it would be able to interact with the page.

Related

Wordpress site: What is the flow to get MySQL data as a Javascript variable safely?

I have a Wordpress site and I need to access data from one of my databases in some javascript/jquery.
Conceptually, what is the best way to do this? I considered installing a plugin to allow PHP in the Wordpress "Custom HTML Element", but would that be just as unsafe as accessing the MySQL database with Javascript? Should I make an event handling php script that lives elsewhere?
This will be used for user-specific sensitive data so it needs to be as secure as possible.
Not asking for any code, just not sure what a secure data flow would look like here. Thanks!
WordPress has a handy REST API that's pretty easy to extend. This is exactly what APIs are for in general - accessing data stored on another domain. Remote MySQL connections are totally possible and sometimes necessary, but for simply display a little data, using or building a simple JSON API is often the preferred method.
Depending on what information you're adding/pulling via the API (either the native WP REST API, or custom one), you may want to authenticate the requests with a key of some sort - and it sounds like this is something you'll need to do based on your concerns of viewing data.
Using an API like the WP Rest api lets you get just about any information you want, typically as a JSON string, which you can then display/modify with JavaScript, PHP, etc.

Wordpress to other source rest calls with username / password

I have been asked to create some custom content on a wordpress site, basically just some web app stuff (html/css/js), but leveraging data from another source via restcalls. There is a service account un/pwd required, and I am wondering what is best practice/approach in terms of the cross site calls with this un? The wire is encrypted but I certainly don't want to store the creds on the client (wordpress admin stuff). I am assuming there is a mechanism to store such on the 'back-end', filesystem, but I am not even sure such access exists? How you get to this....I have gone through the wordpress admin board and haven't found anything that provides access to the filesystem/php files, etc. Perhaps I am not looking in the right place or after the wrong bits?
I have googled but am such a noob with wordpress I am not even sure I have the right approach in mind; any help/advice is greatly appreciated.
EDIT: so if curl is the standard approach for this type of thing, where/how am I able to access the filesystem/php? Is there a specific place this type if thing lives or a convention of where it is placed? Just help with some 101 direction please.
First things first, you will need to develop a plugin for WordPress to properly hook into everything and play nice with everyone else. There are many tutorials for getting started. Here's one that integrates with an API
If you have to store things to make your plugin integrate with this third party, you should use the Options API that WP provides to you, with the information set from a settings page. Please don't hardcode that into a file somewhere in the code. (I'll also mention if you need something more powerful than the plugin options, you can add custom tables)
Now we have code running on WordPress with the information it needs, now it needs to do something. To pull the information from this third party, we can use PHP cURL.
Last, depending on how we want this information to end up being consumed by the user. We can do something simply such as just fetching/injecting the data during a regular WP page load on our custom page. Or we could be fancier and set up a WP REST API endpoint that re-serves the information we got from the 3rd party. Shortcodes? Widgets? Custom Templates? Filter Hooks? There is a lot of ways to present our final interface to the user.

Widgets in Rails

I have a business that I outsourced all of the tech for. Its essentially a widget on an external site, with a management panel on our domain selecting whats shown on the widget. Lets say its a manual "relevant news" widget.
I think I can code the rails part, but how would I do the widgets part? Can someone point me in the right direction? The widget would need to be JavaScript and copy/pastable.
(More context, having to use the old system thats in PHP, and it breaks my heart having to ask the outsourcers to help me with every little thing, so I'm looking to rebuild it)
EDIT: how much of this is still valid? Its posted from 07 - http://www.igvita.com/2007/06/05/creating-javascript-widgets-in-rails/
Thanks!
Geoff
you could create a json api using https://github.com/fabrik42/acts_as_api (imho, this is the easiest way to create an api)
and then create your widget in pure javascript or jquery.
If you need to authenticate, you'll need to send an api key with your requests, and also on your server side check the request.domain with the api key you have given that domains webmaster.

What precautions should I take before I let client add javascript to a webpage?

Question: What precautions should I take when I let clients add custom JS scripts to their pages?
IF you want more details:
I am working on a custom CMS like project for a company, The CMS has number of "groups" that each subscriber "owns" where they do their own thing.
The new requirements is that some groups want to add google analytics to see how they are doing. So I naturally added a column in the table and made code adjustements so if there is some data in that column, I just use the following line in master page to set the script out:
ScriptManager.RegisterClientScriptBlock(Page, typeof(Page), "CustomJs", CustomJs, true);
It works just fine, only, It got me thinking...
It's really easy for someone with good knowledge of how to access cookies etc from from js. Sure, each group is moderated and only super admin can add this javascript, sure, they wouldn't be silly enough to hack their own group. Each group has their own code so its not possible to hack other groups BUT STILL
I am not really comfortable in letting user's add their own javascript codes.
I could monitor each group myself, but the groups are growing really quick and I will hit a time when I will no longer be able to do that.
So, to brief it up: What precautions should I take to avoid any mishaps ?
ps: did try to google, no convincing answers anywhere.
Instead of allowing the users to add their own Javascript files, and given that the only requirement here is for google analytics, why not just let them put their analytics ID into the CMS and if it's present, output the relevant Google Analytics code?
This way you fulfill the users requirement and also avoid the need to protect against malicious scripting.
Letting users use Javascript is in general, a very bad idea. Don't do it unless you have to.
I once I had a problem where I need to let clients use Javascript, but, the clients weren't necessarily trusted, so, I modified cofeescript so that only a small subset was compilable to javascript, and it worked pretty well. This may be waaaay too overkill for you.
You should not let your users access cookies, that's always a pain. Also, no localStorage or webSQL if you're one of the HTML5 people, and, no document.write() because that's another form of eval as JSLint tells you.
And, the problem with letting people have javascript is that even if you believe you have trusted users, someone may get a password, and you don't want that person to get access to all the other accounts in the group.
Automatically recognizing whether some JavaScript code is malicious or sandboxing it is close to impossible. If you don't want to allow hacking your site you are left with only few options:
Don't allow users to add JavaScript at all.
Only allow predefined JavaScript code, e.g. for Google Analytics.
Have all custom JavaScript inspected by a human before it is allowed to display on the site. Never trust scripts loaded from third party sites - these can change from one day to another and turn malicious.
If you have no other choice, you may consider separating path/domain of user javascripts (and cookies).
For example your user have page:
user1.server.com
and you keep user pages at
user1.server.com
So, if you set session cookies to the user1.server.com, it'll render them unobtainable for user scripts from other domains (e.g. user2.server.com).
Another option may be executing all user's javascript at server JS engine (thus controlling all it's I/O and limiting access to browser resources).
There is no simple and easy solution anyway, so better consider using options from other answers (e.g. predifined script API, human inspection).

What is the difference between showFeedDialog and publishUserAction Facebook API?

I saw few tutorials mentioning showFeedDialog, but none that mention how to use publishUserAction. what is the difference anyway?
Is there anyway to use showFeedDialog without prompting the user ?
Are there any good tutorial on how to use publishUserAction?
why does publishuseraction have a suqeuncebase parameter while showfeedialog doesn't have
1) showFeedDialog is a Javascript-only method that is used to render a UI element. Specifically, it renders a dialog box that prompts a user to publish a story to their profile (or a friend's profile). It can be used via Facebook Javascript (FBJS), or the Facebook Connect Javascript libraries.
publishUserAction is an API method, and can be called using any of the Facebook API libraries, including the server-side ones. You don't need a user's confirmation to publish something using this call. However, it can now only publish one-line stories by default, and these do not appear in the main news feed anymore.
The doc pages for showFeedDialog and publishUserAction have some examples, albeit small and not entirely useful ones.
2) There is not, unfortunately, unless the user has granted extended permissions to your application. You generally have to prompt for extended permissions as well.
3) Facebook's documentation is very poor. Your best bet is usually to check out the API documentation on the specific method you want to use, google around like a crazy person, then set up a test in a development application.
4) Only API calls that rely on a session require the sig parameter (deprecated functions had a separate call_id parameter, but that has been rolled into sig in newer versions of the API functions). showFeedDialog is not an API call, it's a Javascript library call, and it handles all the necessary API stuff for a feed prompt in the background.

Categories